...

View Full Version : How to center DIV?



Uzair
02-06-2007, 07:18 AM
I'm designing a web page using divs.
#wrapper (Main Div containing 2 more child divs in it.)
#1 (1st child Div)
#2 (2nd child Div)

When I view my webpage on local machine it shows the #Wrapper right in the center of the page but when I upload the files & open the page through URL, the #wrapper moves to the left. What's the prob, please help!
Here is my CSS...

HTML, BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: ;
background-image: url(images/pbg.jpg);
margin: 5px 0px;
}

#wrapper {
margin: 0px auto;
width: 770px;
height: 748px;
text-align: justify;
background: url(images/cntbg.jpg);
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#1 {
position: relative;
top: 140px;
left: 180px;
width: 570px;
text-align: justify;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#2 {
position: relative;
top: 190px;
left: 180px;
width: 570px;
text-align: justify;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Excavator
02-06-2007, 07:30 AM
Hello Uzair,
What happens when you do it like this:

HTML, BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: ;
background-image: url(images/pbg.jpg);
text-align: center;
}

#wrapper {
margin: 5px auto 0 auto;
width: 770px;
height: 748px;
text-align: justify;
background: url(images/cntbg.jpg);
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

I don't like margin on the body because there is nothing outside of the body. Could use padding but I did it with a top margin on the wrapper.

Not sure about the wrapper positioning left. Older browsers need the text-align: right; and you don't mention what your looking at it with. If the above code doesn't fix it, give us a link so we can see it live.

Uzair
02-06-2007, 07:40 AM
Thanks a lot, it works but another problem occered...
Now the text is not aligned justify. How can I fix it...
here is the Live page...
http://www.geocities.com/uzair_693/

koyama
02-06-2007, 07:58 AM
The problem is that the host apparently adds code above your doctype declaration.

This is most unfortunate since it causes your page to be rendered in quirks mode. The usual method of centering with margin: 0 auto doesn't work with IE in quirks mode. Using text-align: center exploits another IE bug that incorrectly causes block level elements to be centered.

I think you should concentrate on finding out how to get your page rendered in standards mode on that host. Else you will have many more problems with e.g. incorrect box model in IE.

Excavator
02-06-2007, 08:06 AM
This does the trick.
Got rid of the extra stuff and put the text-align: justify; where your text is, in the td.




HTML, BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #7cce4b;
background-image: url(images/pbg.jpg);
text-align: center;
}

#wrapper {
margin: 5px auto 0 auto;
width: 770px;
height: 748px;
background: url(images/cntbg.jpg);
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#abc {
position: relative;
top: 170px;
left: 175px;
width: 600px;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#xyz {
position: relative;
top: 215px;
left: 175px;
width: 600px;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

STRONG {
font-size: 14px;
color: #009900;
}

TD {
padding: 2px;
color: #FFFFFF;
text-align: justify;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


And now for my usual rant about NOT using tables and validating. Check out the links in my sig below.

Uzair
02-06-2007, 08:15 AM
Thanks a lot. Everything is fine now!

Excavator
02-06-2007, 08:35 AM
Hello again Uzair,
Koyama is right, that garbage being added above your doctype is always going to give you problems.
I'm sure there is free hosting that doesn't add to your code, just have to look around for it.

Uzair
02-06-2007, 08:59 AM
got another problem....
Now I wanna place a small image in the right bottom corner of the #wrapper div. I wrote this code but it doesnt work...

#wrapper IMG {
position: relative;
bottom: 0px;
right: 0px;
}

Please help again?
Also tell me.... r u suggesting me to remove DocType from the top of the page? If I do so, then how can I validate my page from W3C ???

ahallicks
02-06-2007, 12:09 PM
No... DO NOT get rid of the doctype. Instead, don't use Geocities to host your site, because they add all sorts of crap at their will that, as has been said, caused the page to be rendered in quirks mode in IE. Try hostia.com for free web hosting 123-reg for a cheap domain name.

Excavator
02-06-2007, 05:20 PM
Goodmorning Uzair, Don't remove your DocType. We're just suggesting a host that doesn't add the garbage above the doctype.
DocType HAS to be on the first line to work.

To place your image put it inside the wrapper after the rest of your code and float it wherever you'd like to put it (no absolute positioning)... like this:



<td>Brochures/Print Media </td>
<td>A+</td>
</tr>
</table>
</div>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fgeocities.com%2Fuzair_693%2Fglobal.css&warning=1&profile=css21&usermedium=all" target="_blank"><img src="images/validcss.jpg" width="103" height="18" border="0" alt="Valid CSS - W3C" /></a>
</div>
</body>
</html>


#wrapper IMG {
float: right;
margin: 0 60px 0 0;
}




Cascading Style Sheets A+Huh?

Uzair
02-07-2007, 06:19 AM
It works, but the problem is still there....
Sorry for taking too much time but..... :(
Everything looks fine on my local machine, but when I upload the files, things change their positions ('~')
Look @ the page now everything moved upwards, while on my local machine, its just fine. Please guide me how can I control this. I'm using I.E 6.0

Excavator
02-07-2007, 07:08 PM
I'm not see the problem Uzair, it seems to look right here.
Here is a screencap from IE7:
http://host-a.net/Excavator/screencap001.jpg/thumb.png (http://host-a.net/Excavator/screencap001.jpg)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum