view raw
Jonathan Davies Jonathan Davies - 8 months ago 20
CSS Question

CSS Percentage Alignment Issue

What is the problem?

I am trying to align two boxes within divs to be on the same level as one another, whilst covering the whole page. The div widths should be 40% for the left and 60% for the right. And then the height/width of the divs inside should be

height: 100%;
width: 90%;

CSS is adding extra margin to the right div, therefore making the div's unevenly aligned from the top.

See the two examples below:

Not working codepen - Unevenly aligned with correct widths.

Aligned codepen - Evenly aligned with incorrect widths.

As you can see, the only change from the two codepen examples is that the width of the
div has been changed from
width: 60%;
width: 40%;
. This now leaves me 20% free, which I don't want. I want to keep the 60% width without the margin being increased from the top.

Why is CSS adding more than 2.5% margin from the top when only the width is increased?


I managed to resolve my issue with box-sizing: border-box and a normal border with a colour.

Working codepen.