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 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:
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.