CODEWITHSUNDEEP
css
user3142695
user3142695

Reputation: 17332

Nested div-container gets bigger then parent element

I just tried to create nested elements, but the inner element (subcategory) gets always bigger, then the parent element (category).

Please have a look at this JSFiddle:

JSFiddle: http://jsfiddle.net/d7vhpcmt/

HTML:

<div id="content" class="clearfix">
    <section class="category boxed">
        <section class="box_1"><header class="trigger trigger_aktiv"><h2>Category</h2></header>
            <div class="content">
                <section class="box_1 boxed"><header class="trigger"><h2>Subcategory</h2></header>
                    <div class="content"></div>
                </section>
            </div>
        </section>  
    </section>
</div>

CSS:

.category {
    background-color: #f8f8f8;
    padding: 20px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 1600px;
    float: left;
    margin-right: 10px; }
    .category a {
        color: #262626; 
        text-decoration: none;
        border-bottom: 0;
        background-color: transparent;
        display: block;
        width: 100%; }
    .category h1 {
        font-size: 2.0em;
        margin: 0 0 0.5em 0;
        font-weight: 300;
        line-height: 1em;
        color: #262626;
        letter-spacing: -1px; }

.box_1 {
    background-color: #E9E9E9; 
    margin-top: 5px; 
    border: 1px solid #E2E2E2;
    display: block;
    width: 100%; }
    .box_1:hover {
        background-color: #eee; }
    .box_1 header {
        padding: 5px 0 0 50px; }
    .box_1 .content { 
        background-color: #f2f2f2;
        height:100%; 
        padding: 0.2em 0 0 0;  }
        .box_1 .content p { margin: 0.5em 0.8em; }
        .box_1 .content h3 { 
            font-size: 1.2em !important;
            margin-left: 0.3em; }   
        .box_1 .content .box_1 {
            margin: 5px; }

Upvotes: 0

Views: 785

Answers (3)

Pete
Pete

Reputation: 58432

It's because you have given .box_1 it a width of 100% and .content .box_1 and margin of 5px; this means your box is going to be 100% + 10px - instead of using margin try add padding to the parent container, this way you don't need to keep adding 5px margin to all it's children:

.box_1 .content {
    background-color: #f2f2f2;
    height:100%;
    padding: 0.2em 5px 0 5px;
}

Example

Upvotes: 1

Overflowh
Overflowh

Reputation: 1114

The problem is in this piece of code:

.box_1 .content .box_1 {
    margin: 5px;
}

You are applying a margin around the entire section containing the Subcategori. Just edit in this way:

.box_1 .content .box_1 {
    margin: 5px 0;
}

In order to remove the margin right and left.

Here is the JSFiddle.

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

If you are not worry about IE8 then use calc in your box_1 class.

.box_1 {
background-color: #E9E9E9; 
margin-top: 5px; 
border: 1px solid #E2E2E2;
display: block;
width: calc(100% - 10px);
}

DEMO

Upvotes: 0

Related Questions