Here's some code for ya... it's similar to Justin's but I do it a bit differently. See if either of these shed light on your situation.
I didn't add a footer at the bottom. I figured you could do that. Just be sure if you use a footer div, you add a clear:both; to it because the div's above it are floated.
Keep what you have for code and add this to the
css:
CSS- Code: Select all
#scrolltop {
width: 995px;
height: 93px;
margin: 0 auto; <!--centers scrolltop -->
}
#wrapper {
width: 995px;
margin: 0 auto;
background-image:url(gfx/layout2007summer/scroll_middle.jpg) repeat-y;
}
#left {
width: 150px;
float: left;
}
#middle {
width: 695px;
float: left;
}
#right {
width: 150px;
float: left;<!--this can be floated right ...doesn't matter. Next bit of code must have a clear added to it. -->
}
Html
- Code: Select all
<body bgcolor="#330000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p align="center">Header</p>
<p align="center">Ecards. Videos. Games. Pictures. Forum.</p>
<p align="center">Username:
<input name="textfield" type="text" class="textfield" size="20" />
Password:
<input name="textfield" type="text" class="textfield" size="20" />
Login. Sign up. Lost password. </p>
<div id="scrolltop"><img src="gfx/layout2007summer/scroll_top.jpg" width="995" height="93" /></div>
<div id="wrapper">
<div id="left">Left Column</div>
<div id="middle">
<p>All your page content here</p>
</div>
<div id="right">Right column</div>
</div><!--end wrapper div -->
<div id="scrollbottom"><img src="gfx/layout2007summer/scroll_bottom.jpg" width="995" height="76" /></div>