CODEWITHSUNDEEP
cssborder
Jamie Fearon
Jamie Fearon

Reputation: 2634

Border causing floats to stack

The following code produces two nice colunms and a footer:

<div class="column one">
ONE
</div>

<div class="column two">
TWO
</div>

<div class="footer">
Footer
</div>​

with css:

.column {float: right; width: 30%; margin: 0 10%;}
.footer {clear: both;}

So why when I add a border the two columns suddenly stack on top of each other? 

.column, .footer {
  border-style:solid;
  border-width:1px;
 }

See - fiddle: http://jsfiddle.net/usdu7/19/

Upvotes: 1

Views: 184

Answers (1)

vivek
vivek

Reputation: 2004

It's because, border adds to the width. So the total width is 4 pixel more than 100% width. So, it stacks over each other.

Adding box-sizing property will solve the problem.

http://jsfiddle.net/usdu7/30/

Upvotes: 4

Related Questions