Suppose I want to organize 4 "divs" in the header to fit horizontally with this simplified code. Now this may seem to be an overly simple question, but my browser even fully windowed only displays three in one horizontal row as opposed to 4. Any ideas why would be appreciated since the width is 25%.
<div class = "division"> 1 </div>
<div class = "division"> 2 </div>
<div class = "division"> 3 </div>
<div class = "division"> 4 </div>
The problem is that the border takes space as well! So you will end up with more than 100%. Take a look at the box model of CSS.
To change the box model you can add the
box-sizing property to your
division class, for example:
This will change the behavior of the boxes. The border and the padding is part of the width now.
Alternatively you could subtract the
border-width ( * 2 ) from the width, for a
border-width of 1px it could look like this:
width:calc(25% - 2px);