How to expand a div with css

Question

Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu

FIDDLE Demo http://jsfiddle.net/56JdE/

CSS

#wrapper
{
    margin:0 auto;
    width:960px;
    height:auto;
}
#leftNav
{
    height:500px;
    width:200px;
    background:#F00;
    float:left;
    margin-right:10px;
}

#div1
{
    height:200px;
    width:250px;
    float:left;
    background:#000;
    margin-right:10px;
}

#div2
{
    height:300px;
    width:400px;
    background:#00C;
    float:left;
    margin-right:10px;
}

#div3
{
    height:200px;
    width:250px;
    float:left;
    background:#00C;
    margin-right:10px;
}

#div4
{
    height:200px;
    width:400px;
    float:left;
    background:#000;
    margin-right:10px;
}

HTML

<div id="wrapper">


    <div id="leftNav">
     <h2>Menu</h2>
    </div>
    <div id="div1">

    </div>
    <div id="div2">

    </div>

    <div id="div3">

    </div>

     <div id="div4">

    </div>

   <div id="div4">

    </div>

</div>

Answer 1

From the look of your FIDDLE, I believe the question is why is my div under the menu?

This is because you have two div4 's.

I amended your FIDDLE Demo which fixed the issue.

<div id="div4">

</div>

<div id="div4"> -Remove this!

</div> -And this!

Having two div4 's caused the total width to exceed your wrapper width making the float:left property move the div to under your menu.

Answer 2

You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.

#contentRight{
  margin-left:210px;

}

<div id="wrapper">


<div id="leftNav">
     <h2>Menu</h2>
</div>
<div id="contentRight">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div class="div4"></div>
    <div class="div4"></div>
</div>

See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/

Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (eg class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.

Answer 3

Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.

<div id="leftNav">
 <h2>Menu</h2>
</div>
<div id="content_wrapper">
     ...
</div>

See fiddle: http://jsfiddle.net/56JdE/2/

Answer 4

There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.

OR

You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.

.wrapper {
    margin:0 auto;
}
.menu {
    height:500px;
    width:20%;
    float: left;
    background: red;
}
.content {
    width: 80%;
    float: left;
}

Full example @ http://jsfiddle.net/M58C6/2/