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"> </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"> </div>
</div>
<div class="spacer"> </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:
- A topMenuContainer element that expands or contracts depends on
the screen resolution -
A topMenuTopBar that is floated right within the topMenuContainer element
-
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.
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/