CODEWITHSUNDEEP
htmlcss
anon
anon

Reputation:

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 below picture. 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.

Upvotes: 0

Views: 50

Answers (1)

Simon
Simon

Reputation: 2423

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

Upvotes: 2

Related Questions