CODEWITHSUNDEEP
htmlcss
Juliver Galleto
Juliver Galleto

Reputation: 9047

force the child div width to match the parent div width

I have this following HTML elements.

<div id="theparent">
    <div class="thechild">
        <div class="anotherchild"></div>
    </div>
</div>

and the CSS for those elements.

#theparent{width: 90%;}
.thechild{width: 100%; padding: 10px;}
.anotherchild{}

Now what I want is that the .anotherchild div width must be equal or leveled to the width of the .theparent div while keeping the padding of .thechild div, how to do that? any suggestions, recommendations and ideas is greatly appreciated.

Upvotes: 0

Views: 1458

Answers (2)

BLOOD-BATH
BLOOD-BATH

Reputation: 86

Since .thechild's padding is known, you can use the CSS3 calc() function to add that known value to what ever value 100% may be and fix the offset with a negative margin.

.anotherchild{
  margin-left:-10px;
  width:calc(100% + 20px);
}

Upvotes: 1

j08691
j08691

Reputation: 208022

Add a box-sizing rule to the child div:

.thechild {
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

jsFiddle example (border added for visibility)

Upvotes: 1

Related Questions