There's no shortage of questions and answers about centering but I've not been able
to get it
to work given my specific circumstances, which involve floating.
I want
to center a container DIV that contains three floated input elements (split-button, text, checkbox), so that when my page is resized wider, they go from this:
||.....[ ][v] [ ] [ ] label .....||
to this
||......................[ ][v] [ ] [ ] label.......................||
They float fine, but when the page is made wider, they stay
to the left:
||.....[ ][v] [ ] [ ] label .......................................||
If I remove the float so that the input elements are stacked rather than side-by-side:
[ ][v]
[ ]
[ ] label
then they DO center correctly when the page is resized. SO it is the float being applied
to the elements of the DIV#hbox inside the container that is messing up the centering. Is what I want
to do impossible because of the way float is designed
to work?
Here is my DOCTYPE, and the markup does validate at w3c:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Here is my markup:
<div id="term1-container">
<div class="hbox">
<div>
<button id="operator1" class="operator-split-button">equals</button>
<button id="operator1drop">show all operators</button>
</div>
<div><input type="text" id="term1"></input></div>
<div><input type="checkbox" id="meta2"></input><label for="meta2" class="tinylabel">meta</label></div>
</div>
</div>
And here's the (not-working) CSS:
#term1-container {text-align: center}
.hbox {margin: 0 auto;}
.hbox div {float:left; }
I have also tried applying display: inline-block
to the floated button, text-input, and checkbox; and even though I think it applies only
to text, I've also tried applying white-space: nowrap
to the #term1-container DIV, based on posts I've seen here on SO.
And just
to be a little more complete, here's the jQuery that creates the split-button:
$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
}).click( function(){positionOperatorsMenu();} )
})
