What is the fewest number of divs that could be used to create the following page layout?_问答_开发者

What is the fewest number of divs that could be used to create the following page layout?

开发者 https://www.devze.com 2023-02-07 00:48 出处：网络

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

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.

What is the fewest number of divs that could be used to create the following page layout?

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>