centering div

[derekteixeira]

hi everyone :eek: -- that's how I feel today.

i'm working on a website and i haven't touch web design in a few months, so i've forgotten a lot. Basically, I'm trying to center my site. So I made one big div that is the entire size of the page, and that is all white. But i want the next div, the actual part you'll see to be centered. How would I do that? How would I make everything inside of a div, center? thanks so much. I know this is a very stupid question.

[Centauri]

The usual way is to make the outer surrounding div the width of the site, not the entire page - then you use auto side margins to centre it on the screen :
margin: 0 auto;

[derekteixeira]

but then the stuff inside of that, like the next div that i want centered.. how would I do that?

[Centauri]

I don't follow. If the outer div is set to the width of your site, and centred, then internal divs will automatically expand to the container width, and therefore be centred as well.

text-align:center; will centre all text and inline elements within a container, but not block level elements like divs - they have to be centred individually using the auto side margins.

[derekteixeira]

okay, so you see at this site (http://hot97.com/) how they have the picture in the background, and then they have centered a white box, with more stuff inside? How would I do that? would that center white be a div? or what would you call that? thank you so much.

[TimDOES]

As like any designing techniques for websites, there are many ways to accomplish this. I would first advise you to study up on CSS column layouts in order to build a solid foundation for your website.

For this particular scenario I would used fixed widths for all your columns.

The HTML will look like so:

<div id="wrap">
<div id="leftCol">
</div>
<div id="mainCol">
</div>
<div id="rightCol">
</div>
<div class="clear">
</div>
</div>


And the CSS will look something like this:

#wrap {
margin: 0px auto;
width: 800px;
}
#leftCol {
float: left;
width: 150px;
}
#mainCol {
float: left;
width: 500px;
}
#rightCol {
float: left;
width: 150px;
}
.clear { clear: both; }


-Tim
www.timdoes.com (http://timdoes.com)

[Centauri]

How about you post up a picture of what YOU want, and we can advise the best way of doing it - as Tim says, there are many ways to achieve similar things, and it really depends on the structure of things around it.

[WebJoel]

"Validate your code first" is one of the first tenents of seeking code help for features that do not do what you want. Totally fixable, -you've got some "warnings" in this code not the least of which is that you are using "<style>" in a "<td>", which is invalid.
"<style> ~ </style>" can only reside before the "</head>".

See screenshot:

[Centauri]

Joel, that looks like an excerpt from the the site linked to by the op as an example, and not anything he is doing... that site has MANY problems code-wise.


okay, so you see at this site (http://hot97.com/) how they have the picture in the background, and then they have centered a white box, with more stuff inside? How would I do that? would that center white be a div? or what would you call that? thank you so much.

Still trying to follow what you mean. By "picture in the background" do you mean the black / grey diagonal stripe background? and by "white box, with more stuff inside" do you mean the main content area of the site ? If so, then this can be done exactly as I posted above - the div containing the site is given a specific width and auto side margins will centre it horizontally on the screen - simple.