CODEWITHSUNDEEP
csspositioning
skrln
skrln

Reputation: 542

Div alignment responsive

I have following HTML structure. It's just a bunch of views-row divs underneath one another. I would like to place the divs side by side per 2.

So following pattern

views-row-1 views-row 2 views-row-3 views-row 4 views-row-5 views-row 6

<div class="view view-toepassingen view-id-toepassingen view-display-id-page view-dom-id-5a6ac8323a7566e5f11218e7b6c49c5c">
    <div class="view-content">
    <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="views-field views-field-title">
        <div class="views-field views-field-body">
        <div class="views-field views-field-field-afbeeldingen">
    </div>
    <div class="views-row views-row-2 views-row-even">
    <div class="views-row views-row-3 views-row-odd">
    <div class="views-row views-row-4 views-row-even">
    <div class="views-row views-row-5 views-row-odd">
    <div class="views-row views-row-6 views-row-even views-row-last">
</div>

So far the CSS I have:

#zone-content .views-row{
    padding: 20px 0 20px 0;
    width: 440px;
}
#zone-content .views-row img{
    max-width: 360px;
    max-height: 400px;
}

#zone-content .views-field-title {
    width: 400px;
    height:50px;
}

#zone-content .views-field-body {
    margin-top:70px;
    height: 290px;
    width: 400px;
}

Upvotes: 0

Views: 193

Answers (2)

mohkhan
mohkhan

Reputation: 12305

You can add the property display:inline-block to your CSS class #zone-content .views-row and see.

Upvotes: 1

maqjav
maqjav

Reputation: 2434

Is this what you want? I added a little margin between divs to see it more clear: Try if yourself

.views-row {
    border: 1px solid;
    float: left;
    margin: 5px;
}

Upvotes: 0

Related Questions