html - Floating two 50% width divs with a 10px margin between -


i want float pair of fluid divs across page, each taking half of container's width, margin of 10px between them. i've done jsfiddle http://jsfiddle.net/andfinally/sa53b/5/, , here's html:

<div class="clearfix">     <a class="prev" href="#">previous</a>     <a class="next" href="#">next</a> </div> 

and css:

.prev {     background: black;     color: white;     font-size: 16px;     margin-bottom: 10px;     display: block;     float: left;     box-sizing: border-box;     width: 50%;     margin-right: 5px; }  .next {     background: black;     color: white;     font-size: 16px;     margin-bottom: 10px;     display: block;     float: right;     box-sizing: border-box;     width: 50%;     margin-left: 5px; } 

the box-sizing rule isn't enough make work - divs more 50% wide. in 1 of answers this question suggested using css display-table. can explain how make work in situation?

thanks!

you can either a) lower 50% 48% , make margin 2% or b) use css3 calc, not supported everywhere, should option in near future. (specifically, when ie8 off table) (see http://caniuse.com/#feat=calc compatability)

example using percentages: http://jsfiddle.net/sa53b/9/
example using calc: http://jsfiddle.net/sa53b/6/


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -