HI! please look at my site and tell me how I get this centered on the page
Im working with a templete, so I figured out how to move it over, but it will look different in each screen size. I kinda want it to be very similar in each different screen size. thanks!
page positions
Hi Pseudonymph,
There are a few ways to center the content. I have had a play around with one and come up with the result you're after (tested only in ie6 & netscape 7)
The main idea is to firstly remove the absolute positioning and set the left and right margin to auto.
To do this I had to change the structure of your site a little and of course modify the css.
Here is the basic structure of the site notice the order has changes and topbox has been added.
<div id="content">
<div id="topbox">
<div id="site-title">
</div>
<div class="date">
</div>
</div>
<div id="site-graphic">
</div>
<div class="logbody">
</div>
<div id="side">
</div>
</div>
and here is the CSS that changed.
#content {
margin-top:10px; margin-left:auto; margin-right:auto; width:600px;}
#topbox {
width:410px; float:left;}
.logbody {
float:left; width:400px; margin:0px 0px 0px 0px; padding:5px;
background:#cccccc; border:1px solid #666666;}
#side {
float:right; width:150px; background:#ffffff; border-left:1px solid #999999;
font:10px verdana, arial, helvetica, sans-serif; font-weight:normal;
color:#666666; padding:2px; margin-bottom:20px;}
#site-graphic {
float:right; margin-right:20px; margin-top:20px;
width:150px; height:150px;}
I hope I haven't left anything out
If you try it out make sure you test it in your target browsers or post it up here again so others can check it out.