Forum Moderators: not2easy
I have a parent DIV that is 780 pixels wide. It contains three other DIV's (columns). For whatever reason, I cannot get them to center across the parent DIV. I used the "float: left;" property and set margins, but IE and Mozilla render the margins differently. Is there a way to center these columns within the parent DIV?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If it's not the bug Robin mentioned (and even if it is), it could be the approach to centering that is causing the problem...
I have a parent DIV that is 780 pixels wide. It contains three other DIV's (columns). For whatever reason, I cannot get them to center across the parent DIV.
By it's very nature, centering three floated divs in a container is not possible. Since the divs float in one direction or the other, you will embroil yourself in a nightmare of tweak'n'peak margin and padding adjustments to get them into line, only to have IE smash up the whole thing on a browser resize.
Since the boxes all float to one side or the other, you can't center them. But if it were ONE unfloated box, you could definitely center THAT.
If you put your floats into a wrapper div and then center the wrapper div, it will result in centered floats...
html:
<div id="your_container">
<div id="my_wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>css:
#your_container{
float:left;
width:100%;
background:blue;
text-align:center; /*centers the wrapper in early IE versions that don't support auto margins*/
}
#my_wrapper{
width:600px; /*necessary for auto margin centering; equals total width of all children*/
margin:0 auto; /*centers in compliant browsers*/
}
#left, #center, #right{
float:left;
width:200px;
}
You could, of course, do this with the existing parent container, but I'm assuming it is floated in order to contain the floated children, perhaps has a background or a border or something that needs to enclose the floats. By adding an element specifically for centering, you don't have to worry about all of that. Because #my_wrapper doesn't have any border or backgrounds that we need to have enclose around the floats, it does not need to be floated. And because it does not need to be floated, we can easily center it.
cEM
