divs inside div not working properly

Question

<div id="footer">
    <div>
    <h2>Revovation</h2>
    <p>Our mission is to provide the best handyman service at an reasonable price without sacrificing quality. You will be satisfy with our work knowing we take the necessary steps to meet your needs and get the job done right
    </p>
    </div>
    <div>
        <h2>Information</h2>
            <div>
                <ul>
                    <li>Blog</li>
                    <li>Services</li>
                    <li>Extras</li>
                    <li>Contact</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>Projects</li>
                    <li>Information</li>
                    <li>About us</li>
                    <li>Shop</li>
                </ul>
            </div>
    </div>
    <div>
        <h2>Renovation Office</h2>
        <ul>
            <li><img src="images/marker.png" alt="">Address</li>
            <li>Phone</li>
            <li>Email</li>
            <li>Fax</li>
            <li>Timings</li>
        </ul>
    </div>

</div>

edit: Adding css

#footer
{

    background  :  #282828; 
    border: 2px solid blue;
    font-family  :  verdana;
    position: relative;
     color : #8e9a8c;
}


#footer div
{
    background  :  #282828; !important;
    width  :  28%;
    border: 1px solid red;
    float : left;
    padding: 60px 0px 30px 40px;
}

blue border is for footer div and red border is for the divs inside it. I am floating inside divs to left. Why wont the outer div cover all three inner child divs? I have no clue whats going wrong in here!

Output Screenshot

I think this is the awnser to your problem: http://stackoverflow.com/questions/7817269/css-container-div-not-getting-height — YaEyezOnMe, Jan 27 '16 at 08:46
Here's a pretty good explanation: http://stackoverflow.com/a/16568504/2695832 — Onkel Toob, Jan 27 '16 at 08:46

score 3 · Answer 1 · answered Jan 27 '16 at 08:47

This looks like a prime case of the floating children of an element collapsing the parent's height: https://css-tricks.com/snippets/css/clear-fix/

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Simply add the class clearfix to the element who's height has collapsed, in this case:

<div id="footer" class="clearfix">

score 0 · Answer 2 · answered Jan 27 '16 at 08:49

0

You can add a float property to your footer element :

https://jsfiddle.net/Ln2fy2a4/

#footer
{
background  :  #282828; 
border: 2px solid blue;
font-family  :  verdana;
position: relative;
color : #8e9a8c;
float: left;
}

answered Jan 27 '16 at 08:49

Malcom

320
6
18

score 0 · Answer 3 · answered Jan 27 '16 at 08:51

You need to use the clearfix method if you have floated divs inside a parent div. Just add these ruels to your css file:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

And then add the clearfix class to the parent div.

score 0 · Answer 4 · answered Jan 27 '16 at 08:55

0

add one property overflow: hidden to

#footer {
    background  :  #282828; 
    border: 2px solid blue;
    font-family  :  verdana;
    position: relative;
    color : #8e9a8c;

    overflow: hidden;
}

answered Jan 27 '16 at 08:55

TusharG

396
1
3
18

pratik · Answer 5 · 2016-01-27T09:07:44.213

Here is what you are doing wrong. Just put this script instead of yours.

#footer
{

    background  :  #282828; 
    border: 2px solid blue;
    font-family  :  verdana;
    position: relative;
     color : #8e9a8c;
}
#footer-div
{
    background  :  #282828 !important;
    width  :  28%;
    border: 1px solid red;
    float : left;
    padding: 60px 0px 30px 40px;
}

Here is html code you have to put instead of yours

<div id="footer">
    <div id="footer-div">
    <h2>Revovation</h2>
    <p>Our mission is to provide the best handyman service at an reasonable price without sacrificing quality. You will be satisfy with our work knowing we take the necessary steps to meet your needs and get the job done right
    </p>
    </div>
    <div id="footer-div">
        <h2>Information</h2>
            <div>
                <ul>
                    <li>Blog</li>
                    <li>Services</li>
                    <li>Extras</li>
                    <li>Contact</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>Projects</li>
                    <li>Information</li>
                    <li>About us</li>
                    <li>Shop</li>
                </ul>
            </div>
    </div>
    <div id="footer-div">
        <h2>Renovation Office</h2>
        <ul>
            <li><img src="images/marker.png" alt="">Address</li>
            <li>Phone</li>
            <li>Email</li>
            <li>Fax</li>
            <li>Timings</li>
        </ul>
    </div>

</div>

divs inside div not working properly

5 Answers5