• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Vertically aligning <div> with multiple browsers

D

deputc26

Senior member
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
 
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. 😉
 
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.
 
It's meant for the first, but the second would probably work too if you remove the newlines and balance your quotes.
 
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?)
 
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.
 
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

Back
Top