Question

I am making a web page that needs a header (on top) and a left aligned menu (below the header) and content to the right of that menu.

The problem I am facing is that I want to use (with elements and floats) rather than to create the struture of the page however, whenever I resize the browser window the content element floats down under the menu. I want the content to stick to the right of the left floating menu.

Any one got any ideas how I can fix this?

my html code has this structure:

 <div id="menu">
    <a href="#">menu #1</a>
    ...
    ...
    ...
 </div>
 <div id="subcontent">
    text or whatnot...
 </div>

Css file look like this:

 #menu
 {
    width: 200px;
    float: left;
 }

 #subcontent
 { 
      width: 800px;
      float: left;   
 }

PS I have tried changing pixels to % but with no luck.

Answer 1

You will need an outer container.

Simply try wrapping both elements in a div of width 1000px

<div class="outer">
    <div id="menu">
        <a href="#">menu #1</a>   
    </div>
    <div id="subcontent">    
    </div>
</div>


.outer{width: 1000px;}
#menu
{
    width: 200px;
    float: left;
}

#subcontent
{ 
    vertical-align: top;
    width: 800px;
    float: left;   
}