Forum Moderators: not2easy
I tried doing it with margin settings, but it looks different in IE and Firefox, plus I have no idea what it looks like on monitors with different resolutions. I don't care how far side to side it goes, but the top and bottom I want fixed.
Does someone who knows a lot more about CSS have any suggestions for me?
Do you know the height of the element you want to center vertically ?
IE: is always the rebel browser: fix the issues later, don't worry about it from the start or you'll never find a solution.
have a look at this example, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title>Horizontally and vertically centered block</title>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
body {
min-width:760px;
min-height:400px;
background-color:#eae7d7;
text-align:center;
}
#vertical{
width:100%;
height:50%;
margin-top:-200px;/* half vertical height*/
float:left;
}
#hoz {
width:734px;
height:374px;
padding:10px;
margin:auto;
border:3px double #000;
background-color:#fff;
overflow:auto;/* allow content to scroll inside element */
clear:both;
}
#hoz p {
margin:0;
padding:10px;
text-align:justify;
}
</style></head>
<body><div id="vertical"></div>
<div id="hoz">
<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><p>
Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat
quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin
diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin
scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit.
Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in,
rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
</p>
</div>
</body></html>
#vertical{
width:100%;
height:50%;
margin-top:-200px;/* half vertical height*/
float:left;
I am far from being a wizard with CSS, but I was wondering what the "half vertical height" does on this and why you picked 200 px, also what about the bottom margin?
What do you want to happen if the content is taller than the window ?
Actually I am only concerned about this for the home page, where I will strictly control the amount of content to make the height the way I want it. On the sub pages I won't worry about it as I will just have it set to the top of the body like other web sites.
I am far from being a wizard with CSS, but I was wondering what
the "half vertical height" does on this and why you picked 200 px
It's dimensions are 760px by 400px.
These values are arrived at in the css from these values...
[blue]
#hoz {
width:734px;
height:374px;
padding:10px;
border:3px double #000;[/blue]
This is why I picked 200px to be "half vertical height".
It will then vertically center the "center block, which is the actual web page".
...also what about the bottom margin?
You asked for the "center block, which is the actual web page" to be centered vertically and presumably horizontally.
This is what I have done. ;)
birdbrain
