Fluid width layout using CSS

Question

I am trying to put together a page that has a header that spans accross the page.

the header contains menu items and looks something like this (ASCII rendering below)

<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) -->

-----------------------------------------------------------------------------------------
  LOGO HERE (Fixed Width)     |    Menu One  |  Menu Two | menu Three | Menu Four      
                              |              |           |            |                
-----------------------------------------------------------------------------------------

I have designed this in HTML like this:

<div id="topMenu">
    <div id="topMenuLogo"><!-- flash logo stuff here --></div>
    <div id="topMenuContainer">
       <div id="topMenuTopBar" class="right-align">
           <div class="useroption floatleft">Action 1</div>
           <div class="useroption floatleft">Action 2</div>
           <div class="spacer">&nbsp;</div>
       </div>
       <div id ="topMenuNavBar">
           <div id=topmenuMenuContainer">
              <ul>
                 <li>Menu One</li>
                 <li><!-- Other menus follow below ...... --></li>
              </ul>
           </div>
        </div>
       <div class="spacer">&nbsp;</div>
    </div>
    <div class="spacer">&nbsp;</div>        
</div>

where the CSS class 'spacer' matches the pattern {height:1px;clear:both;}

I want to be able to write the above so that the page dynamically expands to fit the screen regardless of the resolution. The logo has a fixed width so that does not change, but I want the topMenuContainer dive element to adjust its width dynamically depending on the screensize. basically, that element will contain the following:

1. A topMenuContainer element that expands or contracts depends on the screen resolution

2. A topMenuTopBar that is floated right within the topMenuContainer element

3. A topMenuNavBar that is floated left within the topMenuContainer element

I would be very grateful if someone could show the CSS required to structure the above HTML snippet in the manner I have described.

Answer 1

This should be your #1 resource for general layout questions like these:

http://layouts.ironmyers.com/

You will find any CSS layout you could possibly want on his site. If you don't know CSS yet, you can check out the tutorials at w3schools:

http://www.w3schools.com/css/