2

I'm sure this a common problem, but couldn't find the exact answer :)

I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S

#main {
    margin-left: 30px;
    margin-top: 20px;
    position: absolute;
}

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

#content {
    margin-left: 20px;
    float: right;
    border: 1px solid white;
}

    <div id ="main">
    <div id ="left_menu>&blablabal</div>
    <div id ="content">blablb</div>
    </div>
Improve this question

7 Answers 7

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This just helped me a lot - except to get it to work on my current page layout, I had to add 'display inline block' and 'position fixed' to the 'content' div.
2

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>
Improve this answer

Comments

1

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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=""

Improve this answer

Comments

0 
#main{
display:inline-block;
width:100%;
}

and remove absolute to the parent;

#left_menu,#content{
 ....
 vertical-align:top;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.