I see two main problems with your current design...
Firstly, the background images aren't working properly. The length of the yellow/orange columns extends way below the text. If you resize the text, it can extend below the ends of the columns. Furthermore, the content doesn't centre itself on smaller screen sizes.
Here's what you need to do. Structure your HTML like this:
Code:
<body>
<div id="container">
<div id="header">Header here</div>
<div id="main">Main Content here</div>
<div id="sidebar">Sidebar here</div>
<div id="footer">Footer here (if you want one)</div>
</div>
</body>
Now, you can build up the desired effect with CSS and a couple of carefully chosen background images:
Code:
body {
text-align: center; /* fix for old IEs */
background: #CCC url(/images/stripes.gif);
margin: 0;
padding: 0;
}
#container {
text-align: left; /* undo IE fix */
background: url(/images/cols.gif) repeat-y;
margin: 0 auto;
width: 660px;
padding: 0 34px;
}
#main {
float: left;
width: 389px;
margin-right: 10px;
}
#sidebar {
float: left;
width: 193px;
}
#footer{
clear: both;
}
stripes.gif is a tiny image (1px wide x 2px high if you like) used just to get the white/grey stripes in the background.
cols.gif is a horizontal slice through your two columns, extending horizontally from one shaded area to the other. It only needs to be a few pixels high. This'll give you two centred, coloured columns that'll repeat as far down as they're needed (and no further). You can use an image in your #header div (foreground or background) to hide the underlying columns.
The second problem with your page - and this is a more subjective judgement - is that it's very hard to read. Tiny text combined with reduced line-height and a narrow width (you could afford to make it 100px wider) make the whole think cramped and sometimes totally illegible. Can you read that paragraph under the numberplate? If you must have tiny text, at least give it enough line height to seperate it from underlines in the line above. Personally I've never understood this "make my site look like a credit card contract" trend.
Under the hood, there's a mess of unnecessary javascript and font tags near the top. But I'd get the layout working right before tackling them.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
