The Best Way To Understand Layout?

[Nerdygeek]

I'm trying hard here to understand layout with CSS, I've been trying for quite a while now lol.

I have at the moment, a layout whic has a hader leading into a 3 column layout.

It's a store.

So there is the header, then on the next row 3 columns, one right naviagtion system with newsletter etc and one left navigation system too, with the main content in between the two.

Boy it is proving hard for me to understand how to best make this layout into CSS rather than tables.

It would be great if someone could point me to a tutorial outlining how it's done as my positioning just isn't cutting it.

Thanks.

[Andyram2k]

Hi NerdyGeek,
The best way to do this would be by floating your divs (header, leftcol, middlecol, rightcol) inside a container div. If you set the widths on all divs to match your needs, then you'll have your layout. For example:

<style>

#container {
width: 800px;
margin: 0px auto;
background-color:#000000;
}
#header {
float: left;
width: 800px;
background-color: #FFFF00;
}
#leftCol {
float: left;
width: 190px;
padding: 5px;
background-color: #CCCC00;
}
#middleCol {
float: left;
width: 290px;
padding: 5px;
background-color: #9933CC;
}
#rightCol {
float: left;
width: 290px;
padding: 5px;
background-color: #CC6600;
}

</style>

<div id="container">

<div id="header">This is my header content</div>

<div id="leftCol">Nav content</div>
<div id="middleCol">Middle content</div>
<div id="rightCol">Right hand links</div>

</div>

This is literally a 2 minute example i created for you to illustrate the fundamentals. I would read up on floating divs, as this is a key aspect when creating layouts.

In my example, i have used fixed widths to illustrate, but you could use % widths if you preferred. Hope this helps you in some way :)

[Nerdygeek]

That is super. I never understood floating Div's and kept using absolute positioning.

I suppose there is a time and a place for using absolute positiong and floating div's are rocking the CSS world.

I guess it's where I decided to learn that left me confused.

Thanks for clearing that up. I'll give it a go and see how I do with it this time around.

[Andyram2k]

Cool, if you ever have any queries, there's plenty of nice helpful people answering questions on this board :)

[Nerdygeek]

Yes and your reply was awesome it helped me get my CSS planned and now all I need to do is implement it. Wish me luck :-)

[Andyram2k]

Good luck :)