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>
Comments
Post a Comment