View Full Version : DIV Center

Dec 23rd, 2010, 12:13 AM

Iím doing a website for one of my girlfriends and Iím having a hard time aligning my content in the middle.
Any help is greatly appreciated!

See: Website (http://www.toothjuice.net/krebsbach/index3.html)

Youíll notice a menu at the bottom that loads content into an ďabsoluteĒ positioned DIV above.
Iíd like this content to be centered.

Please advise <3

Dec 23rd, 2010, 12:43 AM
there are various ways of doing it and I think everybody has their favorite, but what I have found to be simplest is the following:

- take the width of your div class (in this case 800px)
- move the left edge of the div to the midway point of the screen (left: 50%;)
- move the div back to the left by half its width (margin-left: -400px;)

it should be centered, regardless of screen width.

but if the screen is less than 800px wide, then the fun starts

Dec 23rd, 2010, 12:44 AM
Hello LillyB1983,
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

Your .fadecontentwrapper already has a width so adding margin: 0 auto; to that will center it.

But the content doesn't follow along with it because it's absolutely positioned. Do you really need ap there? Have a look at the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

Adding position: relative; to .fadecontentwrapper will make the ap elements it contains position themselves relative to .fadecontentwrapper instead of the body of the document.

You get the scrollbars because you add padding to 800px width .fadecontent. The box model shows how what you put in a container must not exceed the size of that container - margin/padding/border all count when figuring total width.

Dec 23rd, 2010, 12:54 AM
... but then Excavator's method would seem to be simpler still :D

Dec 23rd, 2010, 01:30 AM
Thank you for the replies.


When I take out the position:absolute; tag from my .fadecontent the fade script seizes to work and "stacks" my content on top of each other. Any idea why?

Site Link (http://toothjuice.net/krebsbach/index3.html) Updated:

I've gone ahead and put a 900px width and auto R/L margins on my .fadecontentwrapper and this seems to work except let's say you click a new link and want to go back to the indexed link ("Collection") I see a bit of the other divs content underneath it.

Ultimately I want each div centered perfectly to the logo at the bottom with no overlap. Your time/patience is greatly appreciated with this! Thank You!!

Dec 23rd, 2010, 01:48 AM
Ahh I think I figured it out. I needed to set the width of my wrapper div and the height of my content div.

Seriously thank you! Huge help.

Updated Link

Dec 23rd, 2010, 02:00 AM
glad you got it sorted.

just took a quick look at your css.

I know it wasnl;t your question but, you can simplify the links css at the end with

a:link, a:visited, a:hover, a:active {
color: #000000;
text-decoration: none;

a:hover {
text-decoration: underline;
color: #000000;


Dec 23rd, 2010, 02:43 AM
You could benefit from using the vaildators too. Have a look at the links about validation in my sginature line.

Fix your mix-n-matched DocType by making the top of your document look like this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>K R E B S B A C H</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/contentfader.js"></script>

Then you can should be able to look at each error found by the validator and fix it without much trouble.