CODEWITHSUNDEEP
htmlcss
Benjamin Jones
Benjamin Jones

Reputation: 997

responsive multi row div

Is it possible to make a multi row div? Just a 2 basic rows .

I have been able to make a static example of what I am looking for. However I'm not too sure how I would make this responsive. Using percents % with current css doesn't work.

HTML

<div class='wrap'>
<div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>
</div>

CSS

.blocks {display: inline-block; border: solid 1px red; width: 100px;}

.wrap{
    width:210px;   
    border: solid 1px black;
}

Upvotes: 0

Views: 715

Answers (3)

John Slegers
John Slegers

Reputation: 47101

I think you're looking for something like this :

.blocks {
    display: block;
    float: left;
    border: solid 1px red;
    width: 25%;
    box-sizing : border-box
}

.wrap {
    width:400px;   
    padding: 1px;
    border: solid 1px black;
}

.wrap:before,
.wrap:after {
    content: "";
    display: table;
}

.wrap:after {
    clear: both;
}

@media (max-width: 800px) {
    .blocks {
        width:50%;
    }
}

@media (max-width: 400px) {
    .blocks {
        width:100%;
    }

    .wrap {
        width:100%;   
    }
}
<div class='wrap'>
    <div class = "blocks">
        div 1
    </div>

    <div class = "blocks">
        div 2
    </div>

    <div class = "blocks">
        div 3
    </div>

    <div class = "blocks">
        div 4
    </div>
</div>

(see also this Fiddle)

Upvotes: 1

Ash
Ash

Reputation: 17

You should use this: http://getbootstrap.com/css/#grid. The grid will help you create multiple columns on a row.

However if you want use custom css then:

.wrap{
width:100%;
clear:both;  
border: solid 1px black;
}
.blocks {
width:25%;border: 1px solid red;
}

Upvotes: 0

Marvin
Marvin

Reputation: 10092

If you want to use percentage values for your block widths, you have to make sure that there is no blank between the blocks (1) and that the borders and paddings of your blocks are included in the percentage (2).

.blocks {
    width: 50%;
    float: left; /* (1) */
    box-sizing: border-box; /* (2) */
    border: 1px solid red;
}

For adding margin between two blocks, you have to give the margin in % and make sure that two blocks width and the margin add up to 100%. I created an example on JSFiddle.

Upvotes: 1

Related Questions