James Dickens James Dickens - 1 year ago 53
HTML Question

Organizing elements by percentage of width HTML, CSS

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%.

<!Doctype html>
border-style: ridge;
<div class = "division"> 1 </div>
<div class = "division"> 2 </div>
<div class = "division"> 3 </div>
<div class = "division"> 4 </div>

Answer Source

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.

enter image description here


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);