html - How do I code this layout on my webpage? -

Which code should I use to layout my web page listed in this picture?

Edit: Unfortunately, this is not a homework - I'm just a web site !! Thanks!

Is the box height / weight fixed or fluid? Is there any background in panel A? The easiest way:

HTML

  & lt; Div id = "container" & gt; & Lt; Div id = "side" & gt; Panel A & lt; / Div & gt; & Lt; Div id = "head" & gt; Panel B & lt; / Div & gt; & Lt; Div id = "content" & gt; Panel C & lt; / Div & gt; & Lt; / Div & gt;  

css

  # container {width: 100%; } # Edges {width: 20%; Swim left; } # Head {width: 80%; Swim left; } # Content {width: 80%; Swim left; }  

If you have Background A of Panel A, you should set it to container, and get it from it.

Edit:

Q: How do I make sure that the panel does not slide under Panel A panel when A's content is equal to / equal to panel B?
A: You have two options: a) Wrap B and C in the wrapper devil:

HTML

  & lt; Div id = "container" & gt; & Lt; Div id = "side" & gt; Panel A & lt; / Div & gt; & Lt; Div class = "wrapper" & gt; & Lt; Div id = "head" & gt; Panel B & lt; / Div & gt; & Lt; Div id = "content" & gt; Panel C & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

b) Play with padding; Set up 20% padding in container, and -20% toward margin:

css

  #container {width: 80%; Padding: 0 0 20%; } # Edges {width: 20%; Swim left; Margin: 0-20 -20%; }