M. Raees M. Raees - 1 month ago 12
CSS Question

How to create a box having border top width more than content at different browser display size?

I have created a box which has different top width as shown in the picture below.
When browser is full screen
However, for some reason when I resize the browser to 50% the content's width overshoots the top border's width.
When browser is resized to 50%

I am achieving this effect through the following CSS code

p.header{
width: 72%;
margin: 0% 15%;
background-color: lightblue;
border-left: 4px solid darkblue;
margin-bottom: 0px;
text-decoration: underline;
padding-left: 4px;
}

ol{
border: none;
background-color: whitesmoke;
border-left: 4px solid darkblue;
width: 68.7%;
margin: 0% 15%;
padding-top: 10px;
}


To overcome this, I have tried setting the border-top-width but it gives a skew sort of effect.
I have also searched SO but to no avail.

Any help on how to achieve this even when the browser is resized, would be highly appreciated.

Answer

This behavior happens because of the box-sizing of the elements. The margin percentage is a percentage of the width of the element, not the width of the page.

Try adding box-sizing: border-box; to both your p and ol

Comments