Centering a 2 column box

centering in all resolutions

[Lorel]

I'm trying to switch all tables over to CSS but this one stumps me.

I have a H2 tag centered on the page above a 2 column box and I want both centered.

Currently I have the left and right margins set to auto. It looks ok at 800 resolution but on larger screens the header does not center along with the 2 column box.

Is there another option to center the box?

HTML:

<div class="box">
<div class="floatleft">
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
</div>
<div class="floatleft">
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
blah blah blah <br>
</div>
</div>

CSS:

div.box { width:540px;
margin-left:auto;
margin-right:auto; }
div.floatleft {float:left; }

[Lorel]

I researched this and the main div code I'm using:

div.box { width:540px;
margin-left:auto;
margin-right:auto; }

it is supposed to center a div.

Is the outer div not centered because it has another div inside which appears to be making the main div float to the left?

<div class="floatleft">

[iamlost]

I am unclear how you want the final result to look.

1. div.box is centered in compliant browsers by your margin-left: auto; margin-right: auto; or the shortcut method: margin: 0 auto;.
Note that IE requires use of the text-align: center; hack in .box parent container. Switch back to text-align: left; in div.box.

2. By floating the interior divs both to the left they are removed from the flow and so removed from within div.box. Note: FF, Opera and IE all display the following differently (IE encloses everything, Opera something and FF none:

CSS:

div.box {width: 540px; margin: 0 auto; border: 2px #000 solid;
}
div.floatleft {float: left;}

HTML:

<div class="box">
Some stuff here
<div class="floatleft">blah blah blah</div>
<div class="floatleft"><br>blah blah blah</div>
</div>

Note: removing my added border and my added content from div.box evens out the displays. Your actual requirements will make the x-browser difference :-)

3. To centre the <h2> adding to your CSS: h2 {text-align: center;} will centre the heading over the div.box. Because of the short 'sentences' the two columns look far to the left. Adding a width to both/each might be a good idea: div.floatleft {float: left; width: 50%;}

4. So... does it matter that the floated divs are removed from the flow?
What look do you want to achieve?

All my comments dumped together should look similar x-browser:

CSS:

body: {text-align: center; /* IE centering hack */}
div.box {width: 540px; margin: 0 auto; text-align: left; /* reverse IE centering hack */
}
div.floatleft {float: left; width: 50%;}
div.floatright {float: right; width: 50%;}

h2 {text-align: center; /* because of IE hack this might be omitted depending upon surrounding code */}

HTML:

<h2>heading</h2>
<div class="box">
<div class="floatleft">blah blah blah</div>
<div class="floatleft"><br>blah blah blah</div>
</div>