Columns

[jmad 80]

I'm sure this is lack of afternoon coffee but I have 3 columns and am adding a fill and border of 1px to the column.  The border pushes the 3rd column down.  I've tried adjusting column percentage and maybe I didn't get it correct but how is the best way to fix?

 

 

[Aires 265]

Hi, jmad

 

I have used the box-sizing property to make this work.

 

.border-up {

  border: 2px solid black;

  box-sizing: border-box;

}

 

~Aires

[Aires 265]

Forgot to put this 

 

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

[Danny+ 1,327]

Yeah, you can't add a border to an element that has the widths calculated exactly so they create columns. This is because, the border increases the width of the element and therefore, pushes it down. To resolve this you can either apply box-sizing: border-box or use box-shadow.

[jmad 80]

I  knew I was overlooking something!  I had the box-sizing property in with a different class and commented out...plus not assigned to the column.  Clearly not my best moment...

 

Thanks. 

[Danny+ 1,327]

No problem.