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 divs 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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -