PDA

View Full Version : help with basic css layout


JBD
10-19-2007, 11:09 PM
I've spent some time this evening experimenting with CSS as a way of laying out my web page. So far I've managed this but I am having trouble working out how to align the middle box with the others:

http://www.jonballdesign.co.uk/csstriallayout.html

As you can see I've used a DW template as I've never tried this method before - always used tables.

Can anyone advise on where I've gone wrong and perhaps also point out any other errors or unnecessary code (obviously the DW explanations will be deleted afterwards).

I understand I can also put this css layout into an external style sheet and reference to it throughout the rest of my website?

Any help would be much appreciated

Thanks!

Cary
10-20-2007, 08:28 AM
Here's the problem code:
.thrColFixHdr #mainContent {
float:none
width:
padding: 70px 0 0 0 x;
}

1.) "float:none" isn't followed by a semicolon.

2.) Width isn't complete.

3.) Padding has an "x" on the end.

Some of the image links and the external style sheet link are pointing to files on your local hard drive.

You don't need this markup:
<br class="clearfloat" />

You could just use clear styling on the footer instead.
.thrColFixHdr #footer {
padding: 0 0 0 0;
background:#ffffff;
clear: both;
}

Cary
10-20-2007, 08:40 AM
This styling works okay with #maincontent:
.thrColFixHdr #mainContent {
float:left;
width:276px;
padding: 70px 0 0 0;
}

The following styling should be removed from the conditional code in the html:
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }


It shifts the sides up out of horizontal alignment with #maincontent.