CODEWITHSUNDEEP
csshtmlmobile
pbaldauf
pbaldauf

Reputation: 1681

Quadratic responsive html divs keeping aspect ratio

Basically I want to have four quadratic divs in a row. But in the first row the first two squares are merged into a rectangle. The size of the squares should fit automatically the size of the browser window. Important: Between the divs I want a little margin.

My HTML:

            <div id="service-wrapper">
                <div class="double-col"></div>
                <div class="single-col"></div>
                <div class="single-col"></div>

                <div class="single-col"></div>
                <div class="single-col"></div>
                <div class="single-col"></div>
                <div class="single-col"></div>

                <div class="single-col"></div>
                <div class="single-col"></div>
                <div class="single-col"></div>
                <div class="single-col"></div>  

            </div>

and my CSS:

    #service-wrapper
    {
        height: auto;
    }

    .single-col,
    .double-col
    {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 10%;
        border: 1px solid blue;
        padding: 2%;
        display: inline-block;
    }

    .single-col
    {
        width: 25%;
    }

    .double-col
    {
        width: 50%;
    }

Upvotes: 0

Views: 3150

Answers (2)

Chris Spittles
Chris Spittles

Reputation: 15359

You need to add a float property to the divs and let it be a block element instead of inline-block.

JSFiddle DEMO

I've changed your class names as well so you have a common class of col which assumes that every column will be single unless it is overridden with a double class. It basically means you have less markup and CSS to maintain as you see from my example.

HTML

<div class="columns">

    <div class="col double"></div>
    <div class="col"></div>
    <div class="col"></div>

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>  

</div>

CSS

.col
{
    padding-bottom: 23%; /* padding-bottom = width value - 2 (1 each for margin top and bottom values */
    background: #f00;
    float: left;
    width: 23%;
    margin: 1% 1%;
}
.col.double
{
    width: 48%; /* width = .col width * 2 + 2 (1 each for margin left and right values */
}

Alternatively, here are some examples of JavaScript based masonary layouts which could extend the functionality of your blocks further.

Upvotes: 2

pbaldauf
pbaldauf

Reputation: 1681

Try this solution to create quadratic div elements, perfect for responsive web design.

See here: JSFiddle DEMO

HTML

<div class="columns">
    <div class="col double"></div>
    <div class="col"></div>
    <div class="col"></div>

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>  
</div>

CSS

.col
{
    margin: 2%;
    background: #f00;
    float: left;
    width: 21%;   
}
.col:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.double
{
    width: 46%;
}
.double:before
{
     padding-top: 45.6%;
}

Read this article for more information.

Upvotes: 0

Related Questions