Vertically aligning <div> with multiple browsers

Toggle sidebar Toggle sidebar
D

deputc26

Senior member
Nov 7, 2008
548
1
76
First off I've googled this alot (though I am a noob) I'm trying to make a division center on a sceen of any resolution but all my attempts so far only work on certain browsers.

These work in chrome
style type="text/css">
#container1 {
position:relative;
height:auto;
width:auto;
top:50%;
margin-top:-332px;
}
*and*
</style>
style type="text/css">
#container1 {
position:relative;
height:604;
width:auto;
top:50%;
margin-top:-332px;
}
</style>

This in IE
style type="text/css">
#container1 {
position:relative;
height:604;
width:auto;
top:50%;
margin-top:0px;
}
</style>

I'm sure there's a better way to do this. Here's the site if it matters http://www.bcstellardesigns.com/PFC.html
 
Ken g6

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,836
4,815
75
Well, first thing I notice is that your current page doesn't work in Firefox either. That's a bad sign.

Googling around, I found this for vertically centering in an object.

That leaves making an object 100% of the height of the window. Seems like a table can be made to match the window height, but I haven't found that method yet. Otherwise, this probably works in most browsers:

body, html {
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;
}

And for IE6, maybe you should just add a script. IE6 doesn't have NoScript, after all. ;)
 
D

deputc26

Senior member
Nov 7, 2008
548
1
76
Yah that was one of the links I checked out, It centers an object in a frame though rather than centering an entire frame on a monitor/screen.

Where does your code go? INside a stylesheet like this?
<style type="text/css">
body, html {
padding : 0px;
margin : 0px;
width : 100&#37;;
height : 100%;
}
</style>

Or as a <body> attribute like this?
<body style="color: rgb(0, 0, 0);
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;>

Sorry for my noobness, it's been 9 years since I last made a site.
 
Ken g6

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,836
4,815
75
It's meant for the first, but the second would probably work too if you remove the newlines and balance your quotes.
 
D

deputc26

Senior member
Nov 7, 2008
548
1
76
Either I'm applying it wrong or the code doesn't work, I don't see how your code could work as it doesn't specify where content should be except that it should be somewhere on 100&#37; of the screen. Here's the code.

<style type="text/css">
#container1 {
width : 100%;
height : 100%;
padding : 0px;
margin : 0px;
}
</style>
</head>
<div align="center"> <------(centers horizontally)
<div id="container1"> <------(centers vertically?)
 
D

deputc26

Senior member
Nov 7, 2008
548
1
76
I got it, thanks for the help,

Chrome recognizes "margin-top" other browsers just want "margin" adding the top attribute to your code with half the div height as the margin works on all browsers.
 
L

looseratlife

Member
May 2, 2010
46
0
0
Margin: o auto; works in firefox and chrome. I havent yet found a IE equivalent. Nothing works in the stupid IE
 
S

Shilohen

Member
Jul 29, 2009
194
0
0
looseratlife said:
Margin: o auto; works in firefox and chrome. I havent yet found a IE equivalent. Nothing works in the stupid IE
Click to expand...

^ This, especially the last part.

From my experience, using height: 100% and width: 100% does not always yield the result you'd expect, especially if a given page is longer than the screen resolution.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom