is a good place to start with CSS.
Let me get you started off on the right foot, but the best way to learn this stuff is by doing.
I absolutely sucked at CSS when I first started, and now I'm fairly comfortable with it because I practice alot.
CSS
#header {
width: 100%;
height: 100px;
}
HTML
<div id="header"></div>
You use lots of cool things like float and position.
Or if you're looking for a solid framework that does most of the work for you, check out Blueprint CSS, which has several grid layouts that you might find applicable.
Here's some more resources you might find useful:
I don't see any HTML in your question.
The answer to your question depends on whether you want a liquid or a static design.
Here's something to start with:
HTML
<div id="header"></div>
<div id="left-column">
<div id="chart"></div>
<div id="legend"></div>
</div>
<div id="right-column">
<div id="info1"></div>
<div id="info2"></div>
<div id="info3"></div>
</div>
<div class="clear"><!-- --></div>
CSS
#left-column{position:relative;float:left;width:50%;}
#right-column{position:relative;float:right;width:50%;}
.clear{clear:both;}
Seeing the HTML you have, my biggest suggestion is nesting some of the divs to get the control you want. While I'm not using your specific IDs in my sample below, the nesting should show you how to adapt what you have to where you want to be. (I hope!)
I'm going to have to make some assumptions about what you're trying to do in order to help you out. Lining up the bottoms will be the single hardest part, so I'm going to just go ahead and pretend it's not really the nice pretty square you've displayed. (I still can't do lining the bottoms without resorting to tables. Although I believe some of the frameworks, like those mentioned in Josh's answer, may be able to make that happen.)
So the assumptions I'm going to make, to keep life relatively simple, are thus:
Also to make life easier, I'm not going to break the stylesheets into their own CSS file; I'm going to assume that you know CSS and HTML already, and will be able to move them appropriately based on this basic HTML layout I'm about to throw out there.
So the basic layout would probably look something like such:
<html>
<head><!-- blah blah blah --></head>
<body>
<!-- the overall container -->
<div style="width: 500px; margin-left: auto; margin-right: auto;">
<!-- the header -->
<div style="width: 100%; height: 100px;">
My headery goodness here
</div>
<!-- the left column -->
<div style="float: left; width: 320px;">
<div>
My charty goodness here
</div>
<div>
My legendary goodness here
</div>
</div>
<!-- the right column -->
<div style="float: left; width: 180px;">
<div>
Info 1
</div>
<div>
Info 2
</div>
<div>
Info 3
</div>
</div>
</div>
</body>
</html>
You'll need to season the dimensions and add padding to taste, and if you do want the bottoms to line up, I recommend setting explicit height, min-height, max-height and overflow properties on all of the divs.
Finally, again, you really want to separate the CSS I've embedded here into appropriate ID or class selectors in a separate CSS file. This was just a rough hash-out to get you started on the layout; it's by no means a complete answer.
This may not be exactly what you're looking for. I only spent a few minutes on it. It's not too difficult if you have control over how your div elements appear on the page.
<!-- The following shows your desired html structure -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
background: #778899;
min-width: 720px;
max-width: 1020px;
}
#header {
background-color:black;
color:white;
height:150px;
}
#chart {
float:left;
height:120px;
width:50%;
background-color:green;
top:150px;
}
#legend {
float:left;
height:230px;
width:50%;
background-color:yellow;
}
#info1 {
float:right;
height:150px;
width:50%;
background-color:red;
top:150px;}
#info2 {
float:right;
height:150px;
width:50%;
background-color:black;
color:white;}
#info3 {
float:right;
height:150px;
width:50%;
background-color:yellow;}
</style>
</head>
<body>
<div style="width:500px;margin-left:150px;margin-left:160px;">
<div id="header">BLACK</div>
<div id="chart">green</div>
<div id="info1">red</div>
<div id="legend">yellow</div>
<div id="info2">black</div>
<div id="info3">yellow</div>
</div>
</body>
</html>
http://www.960.gs making the CSS girds to much easy and powerful i highly recommend it
<div>
<div id="header"></div>
<div style="float:left;width:50%;">
<div id="chart"></div>
<div id="legend"></div>
</div>
<div style="float:left;width:50%;">
<div id="info1"></div>
<div id="info2"></div>
<div id="info3"></div>
</div>
<div style="clear:both;"></div>
</div>
The problem is that you end up injecting layout logic into html.
Well spotted!
The fact is: CSS Positioning is not powerful to fulfill all possible layouts, especially when you are dealing with complex liquid layouts and double-especially when, as seems to be the case with your example, you want to tie the heights of unrelated, size-based-on-content elements together.
Yes, there are workarounds for many common situations, such as the ‘same height columns’ hacks and grids made out of nested floats and clears. But this almost always requires the markup to be tailored to the layout. Sometimes you can hide that by thinking of ‘nice’ class names that describe how the contained elements are related; more often, you end up with nastiness like class="left_column".
Simple layouts can be done with relatively few spurious wrapper divs and reorderings, so that still ends up a bit nicer than tables. But for variable-size stuff like your example appears to be, it's not really possible; what hacks do exist would end up deeper and less maintainable than just using a table. So go ahead and bung them in a table, as long as you use table-layout: fixed to make them stable and fast to render, and don't start nesting tables like the Netscape 4 horrors of yesteryear.
Until CSS delivers the Holy Grail of complete layout/markup independence — and that's something that CSS3 might deliver in a few more decades! — you will still occasionally need to use a table. There's no shame in it.
As pointed out elsewhere adding extra container divs to act as the columns is the way to go. Whilst perhaps unappealing as you have layout logic in your HTML, this is the currently accepted practice. And is nicer than using tables for layout.
Alternately you could take a static approach and use absolute positioning.
This works for me in FF, Chrome and IE8... not sure about older IE and other browsers
<style type="text/css">
#container { width: 95%; height: 95%; margin: 0 auto; overflow: auto; }
#header { height: 9%; background: #444; }
#chart { width: 50%; height: 70%; float: left; background: #555; }
#legend { width: 50%; height: 20%; float: left; background: #666; }
#info1 { width: 50%; height: 30%; float: right; background: #111; }
#info2 { width: 50%; height: 30%; float: right; background: #222; }
#info3 { width: 50%; height: 30%; float: right; background: #333; }
</style>
<div id="container">
<div id="header">Header</div>
<div id="chart">Chart</div>
<div id="info1">Info 1</div>
<div id="info2">Info 2</div>
<div id="info3">Info 3</div>
<div id="legend">Legend</div>
</div>
*Note: I had to add the overflow:auto to the container to make it work in IE.
One option that works for me in Safari is this:
#header {
height: 50px;
background-color: #000000;
}
#chart, #legend {
float: left;
clear: left;
width: 50%;
}
#chart {
height: 150px;
background-color: #ff33ff;
}
#legend {
height: 75px;
background-color: #33ffff;
}
#info1, #info2, #info3 {
float: right;
clear: right;
width: 50%;
height: 75px;
}
#info1 {
margin-top: -150px;
background-color: #ffff33;
}
#info2 {
margin-top: -75px;
background-color: #ffccff;
}
#info3 {
background-color: #66ff66;
}
I chose arbitrary heights so you implementation would need to be adjusted but I think the adjustments are pretty clear from the CSS.
The following code will allow you to position your DIV without any additional HTML markup:
//* in order to view the results */
div#header, div#chart, div#legend,
div#info1, div#info2, div#info3
{ border: 1px solid black; }
/* IE requirement to center on screen */
body { text-align: center; }
/* define container size */
div
{
width: 500px;
margin: auto;
padding: 0;
text-align: center;
}
/* for header, just define the size */
div#header
{
width: 500px;
height: 50px;
}
/* chart and legend are left floating
and do not allow other elements to their left */
div#chart
{
width: 248px;
height: 250px;
float: left;
clear: left;
}
div#legend
{
width: 248px;
height: 202px;
float: left;
clear: left;
}
/* cover the rest with info divs */
div#info1, div#info2, div#info3
{
width: 248px;
display: block;
height: 150px;
margin-left: 248px;
}
You will notice some strange dimension measurements; this is an effort to combat the way browsers treat differently how to measure an element (if they should include the border or not). The final rendering is almost identical to the three browsers I tested (IE8, FF3.5, O10).
Complete test HTML:
<html>
<head>
<style>
div#header, div#chart, div#legend,
div#info1, div#info2, div#info3
{ border: 1px solid black; }
body { text-align: center; }
div { width: 500px; margin: auto; padding: 0; text-align: center; }
div#header { width: 500px; height: 50px; }
div#chart { width: 248px; height: 250px; float: left; clear: left; }
div#legend { width: 248px; height: 202px; float: left; clear: left; }
div#info1, div#info2, div#info3
{ width: 248px; display: block; height: 150px; margin-left: 248px; }
</style>
</head>
<body>
<div>
<div id="header">header</div>
<div id="chart">chart</div>
<div id="legend">legend</div>
<div id="info1">info1</div>
<div id="info2">info2</div>
<div id="info3">info3</div>
</div>
</body>
</html>