...

View Full Version : centering a div with max width set



bunion
12-17-2008, 06:08 AM
Hi, please look at my test page:

http://www.student4u.co.uk/test/rebuild.php

I have a large white div near the top of the screen. It has max width and min width set. Im just trying to make the div center after the max-with has been reached to no avail. Anyone got any tips?

Heres the css:


* {
padding : 0px;
margin : 0px;
}

body {
background-image : url('images/bottom.png');
background-position : bottom left;
background-repeat : repeat-x;
background-attachment : fixed;
background-color : #D6D6D5;
height : 100%;
}

#backgroundcover {
position : fixed;
top : 0px;
left : 0px;
width : 3000px;
height : 3000px;
border : 0px;
z-index : -4;
background-image : url('images/codetile.png');
background-position : 0px -30px;
background-repeat : repeat;
background-attachment: fixed;
}

#topfix {
background-color : #D6D6D5;
position : fixed;
left : 0px;
top : 0px;
width : 1663px;
height : 70px;
margin-top : 0px;
border : 0px;
z-index : 3;
}

#topbar {
position : fixed;
left : 0px;
top : 0px;
width : 1663px;
height : 70px;
margin-top : 0px;
border : 0px;
}

#main {
background-image : url('images/gradient.png');
background-position : 0px 210px;
background-repeat : repeat-x;
background-attachment : fixed;
background-color : #D6D6D5;
position : relative;
top : 210px;
left : 50%;
margin-left : -413px;
background-color : #3873D7;
width : 786px;
height : 100%;
z-index : 1;
padding : 20px;
padding-top : 25px;
text-align : left;
font-size : 1em;
color : white;
font-family: arial;
padding-bottom : 80px;
}

#bar {
background-color : #FFFFFF;
width : 88%;
min-width : 883px;
max-width : 1200px;
height : 110px;
position : fixed;
top : 70px;
left : 6%;
z-index : 3;
}

The only HTML that is relevant is the div, which is a normal empty div with an id assigned (bar).

_Aerospace_Eng_
12-17-2008, 08:00 AM
Do you really need all of the fixed positioning? I don't see how this is going to work with html/css alone. You will need to know the width of the div before you can center it because margin:auto; won't work in this case as it only works on elements that are position:relative; or position:static. You could use javascript but this can get messy and isn't reliable.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum