Forum Moderators: not2easy
I've been struggling about this topic for too long now so i decided to ask if anyone could help me.
This is how my layout looks now. 3 boxes vertically and horizontally centered:
***********************************************
*-----------company logo----------------------------------*
***********************************************
*-----------drop down menu -------------------------------*
***********************************************
*----------------------------------------------------------*
*------------picture---------------------------------------*
*----------------------------------------------------------*
*----------------------------------------------------------*
***********************************************
Now my client wants that i make the layout look like a widescren movie. I should put white backgrounded boxes for both sides of those 3 boxes i have in my layout already (= the height of these white boxes is same as the sum of the height of these 3 boxes.
In my current layout i have the width of the picture 878px so the fixed width of all these 3 boxes is 878px.
So how can i make those new white boxes to be fluid cause i want these old 3 boxes to be centered and these 2 white boxes fill the area from the sides of these 3 boxes to the side's of the screen. So this white area changes depending on the width of the screen (or the browser window).
I thought i could use a background picture with white area in the center and then repeat it horizontally. The problem is i can't do it cause i need to center vertically those 3 boxes so it makes it impossible to use fixed size background pic, am i right?
please help me with this. Thank you!
The bit where you center vertically is the most "interesting" bit. Centering horizontally is almost trivial (if IE6 decides to cooperate that is).
To put it in code quickly:
<div id="wrapperv">
<div id="wrapperh">
hello world
</div>
</div>
Next we add some resets and a few background colors so we see who's who:
* {
padding:0;
margin:0;
}
body {
background-color: black;
}
#wrapperv {
background-color: white;
}
#wrapperh {
background-color: orange;
}
Let's assume you need 400px as height for the contents and 800px wide (I know they'll differ, but for the easy math etc round numbers are sometimes easier to grasp.
To vertically center the white wrapperv, since we know the height, it's easy: absolute position it at 50% and use a nagative margin of half the height to put it back.
Other options of vertially centerign work too.
#wrapperv {
height: 400px;
position: absolute;
top: 50%;
margin-top: -200px; /* half the height! */
}
#wrapperv {
width: 100%;
}
On to our orange box. Let's give it the needed width (again I'm not using your correct number but you get the idea). We need auto margins to center it and want it to take up the full width of it's parent (which has width set, so it's doable)
#wrapperh {
width: 800px;
margin: auto;
height: 100%;
}
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color: black;
}
#wrapperv {
background-color: white;
height: 400px;
position: absolute;
top: 50%;
margin-top: -200px; /* half the height */
width: 100%;
}
#wrapperh {
background-color: orange;
width: 800px;
margin: auto;
height: 100%;
}
</style>
</head>
<body>
<div id="wrapperv">
<div id="wrapperh">
hello world
</div>
</div>
</body>
</html>
Works fine in Firefox3, safari and opera.
I've not looked at IE6 nor IE7 at this point so I've no idea if they behave themselves. Any fixes I'd add to conditional comments.
Hope this helps.
If always make a point of putting it in a conditional comment as to make sure no other (future) browser can get a hold of it and use any excuse to continue the IE bug/feature.
So, code that works in IE6 as well:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color: black;
}
#wrapperv {
background-color: white;
height: 400px;
position: absolute;
top: 50%;
margin-top: -200px; /* half the height */
width: 100%;
}
#wrapperh {
background-color: orange;
width: 800px;
margin: auto;
height: 100%;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapperv {
text-align: center; /* lack of auto margin support */
}
#wrapperh {
text-align: left; /* lack of auto margin support */
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapperv">
<div id="wrapperh">
hello world
</div>
</div>
</body>
</html>
A bit of testing in standards compliant browsers revealed the negative margins behaves rather badly (as expected somewhat) when the viewport is too small (now most people will allow for more than 400px height).
A more standard way to center vertically is to use:
#wrapperv {
position: absolute;
bottom: 0;
top: 0;
margin: auto;
}
The drawback is that both IE6 and IE7 fail to support this properly, so you need the old solution for them anyway in their respective conditional comments.
It behaves far better in firefox 3 this way when the viewport is too small. No difference in safari and opera.
in code it then becomes:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color: black;
}
#wrapperv {
background-color: white;
height: 400px;
position: absolute;
bottom: 0;
top: 0;
margin: auto;
width: 100%;
}
#wrapperh {
background-color: orange;
width: 800px;
margin: auto;
height: 100%;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapperv {
/* lack of auto margin support */
text-align: center;
/* lack of top:0 and bottom:0 margin:auto vertical centering */
top: 50%;
margin-top: -200px; /* half the height */
}
#wrapperh {
/* lack of auto margin support */
text-align: left;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#wrapperv {
/* lack of top:0 and bottom:0 margin:auto vertical centering */
top: 50%;
margin-top: -200px; /* half the height */
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapperv">
<div id="wrapperh">
hello world
</div>
</div>
</body>
</html>
I don't know of a vertical centering technique that has no issues with the screen being smaller than the to be centered material.
