CSS Div Layouts

[chris_j_haines]

Hi,

I was hoping if anyone could give me any guidance. I have always been interested in website design, mainly the coding using HTML and CSS (I also have experience with PHP and MySQL as I used this for my final year project at university)

Basically what I am looking for is a bit of guidance on building a CSS DIV layout for a new website which I am going to build. I have experience with CSS and am able to edit it to suit my needs but I really want to learn from scratch.

I would like to know if anyone has a basic layout which I can easily understand for the following requirements:

I would like a centered page with a header bar, a navigation bar, a content panel on the left hand side and on the right hand side a panel for the links relating to a particular article as I am thinking of building a website with all the information I learned when I did my Business IT degree. I also would like a footer for things like copyright and disclaimer etc.

I know this may be a lot to ask and I am not asking someone to build it for me but maybe if someone knows where I can find a step-by-step kind of tutorial for this kind of layout.

I would appreciate any guidance.

[Kraai]

Hi

I think you can get the general idea from this site: http://www.maxdesign.com.au/articles/css-layouts/three-fixed/

See also their homepage for more layouts.

[chris_j_haines]

Thats great just what I was looking for thank you very much

[janetzensis]

CSS DIV Layout

#container {
margin: 0px auto 0px auto;
width: 900px;
background: #ffffff;
}

body {
text-align: center;
} 
left column, content column.
#leftside {
float: left;
text-align: left;

padding: 15px;
width: 200px;
background-color: #ffff99;
}

#content {
float: left;
text-align: left;
padding: 15px;

background: #fff;
width: 640px;
}

#clearer {
clear: both;
}

your regular html you add this code, which has the container.

<div id="container">

<img src="website banner here" alt="" />

<div id="leftside">
left side
</div>

<div id="content">
text here

</div>

<div id="clearer">&ampnbsp;</div>

</div>

add your css and content like normal.