html - Margin 0 Auto kicking float:right to a new line -


hey guys i'm trying align 3 boxes horizontally little bit of white space in between. tried using float:left first box margin:auto middle 1 , float:right last box. first 2 boxes display fine third 1 floats right on new line. there anyway fix this? thanks!

html:

    <div class="boxq">         <p class="boxtext">quality.</p>     </div>      <div class="boxs">         <p class="boxtext">speed.</p>     </div>      <div class="boxsim">         <p class="boxtext">simplicity.</p>     </div> 

css:

.boxq {     float:left;     width:30%;     height:400px;     background-color:#c60; }  .boxs {     margin: 0 auto;     width:30%;     height:400px;     background-color:#6cc; }  .boxsim {     float:right;     width:30%;     height:400px;     background-color:#fc6;  } 

just re-order divs (no css changes needed) be:

<div class="boxq">     <p class="boxtext">quality.</p> </div> <div class="boxsim">     <p class="boxtext">simplicity.</p> </div> <div class="boxs">     <p class="boxtext">speed.</p> </div> 

jsfiddle example


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -