CSS: how to get two floating divs inside another div

Answer 1

you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.

Answer 2

your margin-left of #content should include the width of #left_menu. Thus should be

#content {
    margin-left: 170px;
    /* float: right; */ /* no need for a float here */
    border: 1px solid white;
}

You also don't need a position:absolute for your #main (unless other purposes)

So finally:

<style type="text/css"><!--
#main {
    margin-left: 30px;
    margin-top: 20px;
}

#left_menu {
    width: 150px;
    float: left;
}

#content {
    margin-left: 170px;
    border: 1px solid white;
}
.c{clear:both;}
--></style>
    <div id="main">
    <div id="left_menu>&amp;blablabal</div>
    <div id="content">blablb</div>
    </div>
    <div class="c"></div>

.c is to clear and pushes the bottom content off the floats.

Answer 3

The problem is not "staying on the same level", but it's about the size of the container div.

This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079

Answer 4

The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.

Answer 5

try giving the main div an overflow: hidden; and taking away it's position: absolute; which will give it a height equivalent to the greater height of the floating divs

Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""

Answer 6

What about this its all to do with your width on your container.

This works for me.

    <style type="text/css"><!--
        .Content{
        Width:100%;
        }

        .FloatLeft{
        float:left;
        }
        .FloatRight{
        float:Right;
        }
-->
    </style>

        <div class="Content">
        <div class="FloatLeft"></div>
        <div class="FloatRight"></div>
        </div>