CODEWITHSUNDEEP
cssresizeresponsive-designcss-float
Mave
Mave

Reputation: 2514

Responsive CSS - how to 'dynamically' align div to parent width with padding/margin?

I can't make it any clearer than this, sorry. I want to properly align 4 divs (on a width of 1150px as that is max-width of the content div) and upon resizing when it can't do 4, 3 in the center etc etc)

On >1150px screens it would/should like this: https://i.sstatic.net/i9XxP.png. Now, the closest I can come is this: https://i.sstatic.net/mlqsL.png. I can set the first-child margin to 0 on the left one, but as there are multiple rows, those would still have the padding. Creating new rows as divs isn't possible either, because that would ruin everything when it's resized and only shows 3/1 on both rows.

When resizing it should center, with even margins on all sides, and not like this as it is right now: https://i.sstatic.net/rst3B.png.

Basically all the code I have right now is this, simply because I know of no other way.

div.project-container {
    float: left;
    margin: 0 8px 30px 8px;
    position: relative;
    width: 270px;
}

I'm guessing it has to be Javascript who rescues the day, and I'm fine with that. Pointers in the right direction, examples on the internets, all is welcome. Thank you.

Upvotes: 0

Views: 2140

Answers (1)

vals
vals

Reputation: 64264

Adapted from an old answer :

HTML 

<div id="container">
    <div class="obj">1</div>
    <div class="obj">2</div>
    <div class="obj">3</div>
    <div class="obj">4</div>
    <div class="obj">5</div>
    <div class="obj">6</div>
    <div class="obj">7</div>
    <div class="obj push"></div>
    <div class="obj push"></div>
    <div class="pushend"></div>
</div>

CSS 

#container
{
    max-width: 980px;
    background-color: lavender;
    display: inline-block;
    text-align: justify;
}

.obj
{
    width: 180px;
    height: 180px;
    background-color: lightgreen;
    display: inline-block;
    margin-bottom: 20px;
}
.obj.push {
    height: 0px
}
.pushend {
    width: 100%;
    height: 0px;
    display: inline-block;
}

demo

Upvotes: 2

Related Questions