CODEWITHSUNDEEP
css
Mitchell
Mitchell

Reputation: 69

Padding on the right goes off screen on window resize

Basically while I was making a website I noticed when I resized the window the padding on the right and bits of text is being pushed off the screen

How it is: https://i.sstatic.net/66TTN.png How it should be: https://i.sstatic.net/xLSdO.png

html:

<div id="l-ContentContainer">
    <div class="content content-divider">
        <h2>Article 1</h2>
        <p>Lorem ipsum dolor sit amet...</p>

        <p>Integer laoreet diam eu interdum ornare...</p>

        <p>Pellentesque varius neque sed fermentum consectetur...</p>
    </div>
</div>

css:

.content {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    padding-top: 0px;
    overflow: hidden;
    position: relative;
}

Any way to fix this? Thanks in advance.

Upvotes: 3

Views: 4853

Answers (4)

Gil
Gil

Reputation: 1804

Your div is already filling the whole width of the container div, so just remove the width: 100% part. since you already set a max width of 1000px it won't damage your display.

Adding padding to an element increases its dimensions after the size was set, so your div width is actually 100% + 20px.

Upvotes: 0

Yagiz Ozturk
Yagiz Ozturk

Reputation: 5428

First reconsider the 100% width and max-width in your implementation. Then apply a 10px padding to your paragraph tag not content. Try also using reset.css if you are not. You can design this structure better.

.content {
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    padding-top: 0px;
    overflow: hidden;
    position: relative;
}

p {
    padding:10px
}

Upvotes: 0

James
James

Reputation: 4580

Your div content takes the width of the body since you have given the width as 100%. Try using box-sizing to content div

.content {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box;
}

Fiddle

Upvotes: 6

Andrei Terecoasa
Andrei Terecoasa

Reputation: 572

Try this for your div!

box-sizing:border-box;

Upvotes: 0

Related Questions