Forum Moderators: not2easy
I'm creating a portfolio website and i'd really like to centre my divs on the page. I have done this by using: left: 50%; margin-left:-260px; on the code of each div. This centres it on the page when opened full size in my browser.
You can see my holding page where I've used the same method here: <snip>
However, say I resize the window, I loose half of my layout off the left hand side of the page!
Can I make the divs stop moving when they reach the left hand side of the browser window?
Cheers.
[edited by: eelixduppy at 8:21 am (utc) on Nov. 27, 2008]
[edit reason] no URLs, please [/edit]
the use of position:absolute for page layout is, in most cases, totally
unnecessary and, as you have discovered, can cause unwanted side effects.
To center elements on the page use margin:auto as demonstrated in this example...
[red]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">[/red]
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
#mydiv {
width:498px;
padding:20px 10px 10px;
border:1px solid #999;
margin:auto;
}
#mydiv p {
margin:0;
padding-bottom:10px;
font-family:times,serif;
font-size:1em;
color:#666;
text-align:justify;
}
</style></head>
<body><div id="mydiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div></body>
</html>
Note:
It is imperative that a full DOCTYPE is used with this method as IE, in Quirks Mode,
does not recognize margin:auto. :(
birdbrain
I've just thought though... If I wanted to have two divs next to each other, (one left and one right) or one div layered above the other how would I do this using the above method?
Thank you :)
The normal method is to have a containing div which will, obviously, contain all the page contents.
This containing div will then require a width setting and margin:auto to be applied.
birdbrain
Thank you :)
No problem, you're very welcome. ;)
