html - Clear: both overrides margin: 0 auto? -
i'm having positioning problem need deal with. in container div have 2 divs, both should horizontally centered under each other. however, i'm having problems positioning of second div.
if add clear:both div 2 gets on new line, desired. however, if using clear:both margin: 0 auto; doesn't work. use instead make div centered?
html:
<div class="row-fluid"> <div class="span6 offset3 text-center header"> <h1>title...</h1> <p>text...</p> </div> <div class="span3 offset4"> <form> ... </form> </div> </div>
css:
.register .span3 { width: 270px; clear: both; margin: 0 auto; }
output:
- without clear:both ____________________________________ | | | ______ ______ | | | | | | | | | div 1| | div 2| | | |______| |______| | | | | | | | | | | | | | - clear:both ____________________________________ | | | ______ | | | | | | | div 1| | | |______| | | ______ | | | | | | | div 2| | | |______| | | | | | - desired output ____________________________________ | | | ______ | | | | | | | div 1| | | |______| | | ______ | | | | | | | div 2| | | |______| | | | | |
as understand it, bootstrap's grid system uses floats position elements on page.
alas, if float: left;
margin: 0 auto;
not put in centre of page. float left. reason div
s appear offset left because have offset-3
/offset-4
classes applied.
to put div
elements in middle of page, suspect you'll need step outside of bootstrap's grid framework , own thing.
Comments
Post a Comment