How do I code this panel layout on my webpage?

Question

What code should I use to layout my webpage as listed in this pic?

Edit: Unfortunately, this is not homework - I am just a web newb!! Thanks!

Answer 1

Are the height/weight of the boxes fixed or fluid? Has panel A any background? The easiest way:

HTML

<div id="container">
    <div id="side"> panel A</div>
    <div id="head"> panel B</div>
    <div id="content"> panel C</div>
</div>

CSS

#container{
    width: 100%;
}
#side{
    width: 20%;
    float: left;
}
#head{
    width: 80%;
    float: left;
}
#content{
    width: 80%;
    float: left;
}

If you have background to panel A, you should set it to the container, and inherit it from.

Edit:

Q: How do I ensure that panel C doesn't slide under panel A when A's content is shorter/equal to Panel B?
A: You have two option:
a) Wrap B and C to a wrapper div:

HTML

<div id="container">
    <div id="side"> panel A</div>
    <div class="wrapper">
        <div id="head"> panel B</div>
        <div id="content"> panel C</div>
    </div>
</div>

b) Play with padding; set 20% padding to the container, and -20% margin to the side:

CSS

#container{
    width: 80%;
    padding: 0 0 0 20%;
}
#side{
    width: 20%;
    float: left;
    margin: 0 0 0 -20%;
}

Answer 2

It's not quite clear whether you want fixed-width or floating-size "panels," but you can find tutorials for a wide range of HTML layouts using CSS at this website:

http://www.maxdesign.com.au/presentation/page_layouts/

There are several varieties of two-column layouts.