CODEWITHSUNDEEP
htmlcsslayoutgrid
David Moreno García
David Moreno García

Reputation: 4523

No height in grid layout containers

I'm writing a grid system for a personal site. Actually, my code looks like this:

    <div class="page">
        <div class="row">
            <div class="col span_1">Column 1, Row 1</div>
            <div class="col span_1">Column 2, Row 1</div>
            <div class="col span_1">Column 3, Row 1</div>
            <div class="col span_1">Column 4, Row 1</div>
        </div>

        <div class="row">
            <div class="col span_4">Column 1, Row 2</div>
        </div>

        <div class="row">
            <div class="col span_1">Column 1, Row 3</div>
            <div class="col span_1">Column 2, Row 3</div>
            <div class="col span_1">Column 3, Row 3</div>
            <div class="col span_1">Column 4, Row 3</div>
        </div>

        <div class="row">
            <div class="col span_1 expandable">Column 1, Row 4</div>
            <div class="col span_3">Column 2, Row 4</div>
        </div>

        <div class="row">
            <div class="col span_1 expandable">Column 1, Row 5</div>
            <div class="col span_2">Column 2, Row 5</div>
            <div class="col span_1 expandable">Column 3, Row 5</div>
        </div>
    </div>

and here is the css:

.col {
    border: 5px solid #333;
    background-color: red;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

.page {
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;
}

/* Phones */
@media screen and (max-width: 599px) {
    .col {
        margin-left: 1%;
        padding: 0 1.5%;
    }

    .row .col:first-child {
        margin-left: 0;
    }

    .span_1, .span_2, .span_3, .span_4 {
        width: 100%;
        margin-left: 0;
    }
}

/* Tablets */
@media only screen and (min-width : 600px) and (max-width : 1023px) {
    .col {
        margin-left: 0.4%;
        padding: 0 1.5%;
    }

    .span_1 {
        width: 49.4%;
    }

    .span_2, .span_3, .span_4, .expandable {
        width: 99.2%;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .col {
        margin-left: 1%;
        padding: 0 1.5%;
    }

    .row .col:first-child {
        margin-left: 0;
    }

    .span_1 {
        width: 24.25%;
    }

    .span_2 {
        width: 49.5%;
    }

    .span_3 {
        width: 74.75%;
    }

    .span_4 {
        width: 100%;
    }
}

This is working nice when resized but I have a problem. Page and row classes have no height so I cannot use background nor paddings. Also, I cannot set a padding to .col . What I-m doing wrong? How can I solve this?

Here you have a fiddle to test if needed: http://jsfiddle.net/3qkVG/

Upvotes: 0

Views: 154

Answers (1)

KBorja
KBorja

Reputation: 257

Take a glimpse into Expanding a parent <div> to the height of its children

However if you don't want the scrollbars to appear use overflow:hidden instead of auto.

Upvotes: 1

Related Questions