What is the fewest number of divs that could be used to create the following page layout?
update
http://www.jsfiddle.net/dougrchamberlain/nMkxE/
See how it all falls apart. the width of the id=middle should span the entire remaining center #left:width - #wrapper:width = #middle:width
if #right contains any开发者_JAVA技巧 content then
(#left:width + #right:width) - #wrapper:width = #middle:width
latest edit
Just for everyon's information. The image below was created in MSpaint. No HTML used at all.
edit
This is not supposed to be a trick question. plus please only consider html4 as an option. apparently I missed the HTML4 tag. Also, are you all considering the fact that the right pane should be collapsed when empty.
Not including any nested divs for the actual features, ie menus content areas etc...
My count is 6???
If you don't have to wrap your elements in a fixed width div, you only need 5 - otherwise 6.
- header
- left
- middle
- right
- footer
- wrapper (optional)
I just hope you're not trying to save a few bytes by minimizing the amount of divs for the layout :)
EDIT: You can get away with just 4 divs if you use header, left, center, and right, and simply set the first element in the footer to clear: left;
The easiest way to do that is to do something like
body p { clear: left; }
as in this example: http://jsfiddle.net/86M3M/1/
...and If you use html5: No divs needed ;)
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
...
<nav id="main"> ... </nav>
</header>
<nav id="left"> ... </nav>
<section id="main_content"> ... </section>
<section id="right_content"> ... </section>
<footer> ... </footer>
</body>
</html>
加载中,请稍侯......
精彩评论