CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 19435

Why is my description div ignoring the description-containers padding?

I have a wrapper for my description which has 20px padding. Then I have a description div with to much content.

The wrapper container uses overflow: hidden so any content outside this container is hidden. But why is my description div ignoring its wrappers padding?

Is it because I'm using box-sizing: border-box?

See my fiddle here: http://jsfiddle.net/nZ38w/2/

update: I can set the height of the description box and then use overflow: hidden, but isn't there another way? (http://jsfiddle.net/nZ38w/4/)

Update 2: It seems that setting a new height on the details-right-section is the only solution: http://jsfiddle.net/nZ38w/5/

Code:

<div class="row">   
  <section class="column1"> 
      <!-- data here --> 
  </section>

  <section class="column2 details-right-section">
    <div class="description-container" >
      <h2>Description</h2>
        <div class="description">
          To much content here
        </div>
      </div>
  </section>
</div>

/* CSS */

/* Rest css */
body { font-size: 12px; margin: 0; padding: 0;}
h1, h2 { margin: 0; padding: 0; }
div, section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Main elements */
.row { width: 300px; height: 175px; }

.column2 {
    width: 300px;
    height: inherit;
    background-color: #cbdddc;
}

/* Description container */
.description-container {    
    height: inherit;
    overflow: hidden;
    border: solid 1px #ff8182;
    padding: 20px;
}

.description {
    line-height: 16px;
    line-height: 1.6rem;
    background-color: #e2e2e2;
}

Upvotes: 0

Views: 42

Answers (2)

Josh M
Josh M

Reputation: 992

You could create another div class="description-overflow" and since you know the exact height would be 175px-40px it would give you the output you wanted

http://jsfiddle.net/nZ38w/6/

Upvotes: 1

eugene82
eugene82

Reputation: 8842

Try either removing the height: inherit; from .column2, or removing height: 175px; from .row (or changing height to min-height).

Upvotes: 0

Related Questions