You should really be applying your float and margins to #content instead of individually to #main, .colours and .banner cos you're essentially just repeating the same style (actually, you don't even need #main). And #sidebar should be taken out of #content. Also, you don't need to float #sidebar or give it a width, just give it a margin-right wider than #content. You might also want to reconsider the 15% margin-right because at smaller screen sizes, your margin becomes much greater in proportion to the rest of your layout.
And to center your header, you should make the left and right margins auto.
So what you end up with should look something like:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>interactive richard: web/print design, logos, branding and stationary</title>
<style>
html,body {
margin: 0;
padding: 0;
text-align: left;
color: #444444;
}
body {
background: url(images/bg.jpg) no-repeat top right;
font: 62.5% Geneva, Arial, Helvetica, sans-serif;
}
img { border: none; }
h1 {
font-weight: normal;
text-align: left;
}
h2 {
margin-bottom: -10px;
font-size: 1em;
}
#header {
background: url(images/logo.gif) no-repeat top left;
height: 96px;
width: 450px;
margin: 40px auto 0;
}
#header h1 { display: none; }
#content {
float: right;
width: 450px;
margin-right: 15px;
}
#main { text-align: justify; }
#sidebar {
text-align: left;
margin-right: 490px;
color: #666666;
}
.colours {
background: url(images/colours.gif);
height: 5px;
}
</style>
</head>
<body>
<div id="header"><h1>interactive richard</h1></div>
<div id="content">
<div class="colours"><!-- Displays the colour strip at the top --></div>
<h1 class="banner">web/print design, logos, branding and stationary</h1>
<h2>About Richard Henry</h2>
<p>I'm a UK-based designer, living in Huddersfield near Leeds.</p>
<h2>What I can do for you</h2>
<p>If you're looking for someone to design and print anything from your business cards, stationary and window stickers, to launching a full online marketing campaign and web store with credit card processing, I'll be able to help you out.</p>
<h2>How much does it cost?</h2>
<p>If you tell me your budget, I'll tell you how much I can produce for what you're willing to spend. Projects are scalable to fit your needs and wallet, so just let me know the ground rules, and I'll work with them.</p>
<h2>Print your own media with Interactive Richard</h2>
<p>If you've had your business cards, letterheads, or other media designed somewhere else, consider using me to print it. My rates are very competitive - contact me using the form at the bottom of the page to learn more.</p>
</div>
<div id="sidebar">
<h2>Sidebar!</h2>
<p>Welcome to the sidebar of love. I'll put things like links to conferences, cool information, my media order pack, and loads of **** in this section. Awesome.</p>
</div>
</body>
</html>
You could do with making your text size bigger too cos at the moment it's tiny.
Bookmarks