<DIV> and CSS - Horiz. Centering

[wjmazza]

i am trying to create a tableless design using DIV and CSS but i am having problems doing it... to explain, here is what i want the design to look like (using tables)

<div align="center">
<table width="975" border="0">
 <tr>
 <td colspan="3">
 <!-- Header Goes Here -->
 </td>
 </tr>
 <tr>
 <td><!-- Left Navigation Here --></td>
 <td><!-- Main Content Here --></td>
 <td><!-- Right column for Misc --></td>
 </tr>
 <tr>
 <td colspan="3">
 <!-- Footer here -->
 </td>
 </tr>
</table>
</div>

the table is to be 975px in width and is to always be horizontally centered in the browser. this way works but, like i said, i want it to be a tableless design using div/span and CSS. i tried creating a layout, and it works (i got a header, body with threee "columns" and a footer and is 975px in width), but i can not get it to center in the page.

please help, n e 1...
walter

[D_Blackwell]

i'm going to take a closer look at this code, but what jumps out is {width: 975px;}. What is your audience? Mine is 35% - 40% 800x600 resolution. They wouildn't like this.

[D_Blackwell]

I think that the following example meets the general criteria. I have not specified the {width: 975px;}, but am allowing the layout to fluctuate according to screen width. Some of the borders are running together, but I've just bordered everything so that the layout can be seen.

<style>
div {
border: .1em solid #000;
}
#left {
width: 33%; float: left;
}
#right {
width: 33%; float: right;
}
</style>
<div id="head">
HEADER
</div>
<div id="wrapper">
<div id="left">
LEFT NAV
</div>
<div id="right">
RIGHT NAV
</div>
<div id="center">
MAIN CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>

[wjmazza]

thanks D... i knew it had something to do with the "float" command but i didn't understand how to use it... this helps alot since i am building a site for my church youth group and it is suppose to be done by tomorrow (or today, depending what time zone you are reading this in :)

quote:

What is your audience? Mine is 35% - 40% 800x600 resolution. They wouildn't like this.

1024x768 (dont understand the % you posted) - i am using the design concept where to create a layout that is "not wide enough to fill a 1024x768 screen but too wide for 800x600 was inspired by David Shea and his explanation [mezzoblue.com]"
---as quoted from [gtmcknight.com ]

[wjmazza]

nvmd i understand the percentage now - 35-40% of your viewers use a 800x600 resolution...
my percentage is more like
3% using 800x600, (the site lets them change the theme to fit their resolution though)
93% using 1024x768 and above, and
4% using mobile phones/pda (but i created a "xhtml mp" site for those users as i,too, am a mobile person and hate visiting sites not able to offer wireless web pages - it is basically hyocritical to be a webmaster who hates not having wireless web content available and then not even create a site optimzed for wireless/mobile web browsers)

but n e wayz, thanks again
walter

[createErrorMsg]

body {
margin: 0 auto;
text-align: center;
}

...this will, in most cases, center a css layout. The left/right auto margin value does it for standards compliant browsers. The center text-align usually gets IE to cooperate.