Centering Div

[scottyrob]

Hi,

A friend of mine made this design for me in photoshop and i have been working on it as he is unfortunately unable to anymore. http://srobinson.net/Black&White%20Hosting/

Couple of things id like some help with :)

1) Centering the whole of the site dynamically. Not sure how to go about that
2) Making the gooey div show the background image. The reaosn for doing this is so that i am able to write directly over the top of the image. The same code was used here but unfortunatly it didnt quite work the same way http://www.artofbentomlin.com/ucas/ (Bottom section of the white content area)

[petewilliams]

To center the page you need to enclose it in a container div of fixed width and then center that, e.g.:

HTML:

<div id="container">
<h1>Hey, this page is centered!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

CSS:

#container {
width: 800px;
margin: 0 auto;
}

EDIT: Just looked at your code, you can just apply this to the content div directly and forget the container.

Not sure I understand the second problem fully, can't you just use:

background-image: url('bg.jpg') ?

Hope that helps a bit,

Pete

[felgall]

To center the content of a tag you just apply margin:0 auto in the stylesheet along with the required width.

[Centauri]

The big problem here is all the absolute positioning - that lifts all the elements out of the document flow so that no element can affect the size or position of any others. Your #gooey div has no height due to having no contents within the document flow - no height means no background image can display. The auto side margin method of centering mentioned above also will not work with absolute positioning. Best to keep absolute positioning to a minimum, for special effects where you specifically want something to overlap.

[scottyrob]

Hi,

Thanks very much for all your replys.

Centauri: How do you recommend going about this? Wouldnt know where to start if i was to not use absolute positioning..

Regards,
Scott

[ray326]

The short answer is you use floats instead.