How to stay the div below another div if the height is not specified?

Question

I have a #main div which contains two divs(#left and #right).I have another div #below_main which is after #main .

Problem: When the height is not set for the #main then those content mess the #below_main. I don't want to have static height for the #main because this is more like content posting height will change dynamically according to content amount.

So i tried min-height for #main but doesn't work i also tried position to relative for #main that too doesn't work.

Now how to set this as no matter the #main #left content is, but the #main_below should start after the content(#main) div.

I believe the float in left what making differences. If that so please explain me. Any help?

CODE

HTML

<div id="main">
    <div id="left">
     <!-- Dynamic contents -->        
    </div>
    <div id="right">
    </div>
</div>
<div id="below_main">
    <ul class="st">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
    </ul>

    <ul class="st">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
    </ul>

    <ul class="st">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
    </ul>

    <ul class="st">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
    </ul>
</div>

CSS

#main {
        background: #ffffff;
        width:980px;

        margin-top:20px;
}
#main #left {
    width:610px;
    float: left;
    padding:0 0 0 40px;
}

#main #right {
    width:280px;
    float:right;
    padding:0 25px 0 0;
}
#below_main {
    height:225px;
    width:980px;
    border:1px solid #dddddd;
    margin-top:20px;
    border-radius: 10px;
    background:rgb(0,100,0);
}
#below_main ul.st {
    list-style: none;
    margin: 50px 0 0 0;
    padding: 0 0 0 55px;
    float:left;
    width:140px;
    font-size: 11px;
}

JSFIDDLE

EDITS AFTER POSTING THIS QUESTION

Thanks all, clear:both helps but the background color is not filling upto the content.Do you have any idea? i believe this is due to no height specified.how to do it without height? Check This fiddle

I guess you will need [this](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) — Mr. Alien, Oct 09 '13 at 12:57

Freeman Lambda · Answer 1 · 2013-10-09T14:55:44.787

2

Add clear: both; style to below_main.

EDIT: To fill the #main div with your specified background color, by not setting an explicit height to the #main element itself, you could apply that bgcolor to the #left and #right divs instead.

#main > div { background-color: mycolor; }

EDIT 2: @sun managed to find a better solution wich i will include here: Add '<div class="clear"></div> before the closing of #main with style .clear{ clear:both}. This helps in both background color issue and content.

edited Oct 09 '13 at 14:55

answered Oct 09 '13 at 12:56

Freeman Lambda

3,567
1
25
33

Thanks `clear:both` helps but the background color is not filling upto the content.Do you have any idea? i know this is due to no height specified.how to do it without height. – sun Oct 09 '13 at 13:07
I didnt understand very well what you mean by 'not filling upto the content'. Can you please tell me in other words what are you willing to achieve? – Freeman Lambda Oct 09 '13 at 13:19
i can't see background color if no height is specified in `#main`.But if set height i can able to see background color only upto specified height not until the content in the div. – sun Oct 09 '13 at 13:21
your edit not giving correct solution because `#left` content is higher than `#right` so the background color at right will be upto its content.so you'll see a white BG color at left and half(in my case) white BG at right. So try to change the answer as i commented to Matthew. thats works for me..Thanks – sun Oct 09 '13 at 14:07

score 1 · Answer 2 · answered Oct 09 '13 at 13:28

1

To address your update, you just need to use a clearfix on your main div.

See the updated fiddle here.

I personally use the one by Nicholas Gallagher which is this

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

answered Oct 09 '13 at 13:28

Matthew Green

10,161
4
36
54

Hi thanks, i did this `
` before the closing of `#main` with style `.clear{ clear:both}`. this helps in both background color issue and content – sun Oct 09 '13 at 14:01

How to stay the div below another div if the height is not specified?

2 Answers2