0

I'm back with another probably lame CSS question.

So I have a container div, two paired divs within it, and each of them has two more divs. I want to justify all four with equal space between them.

What I have at the moment:

html:

<div class="container">
    <div class="pairsWithinContainer">
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="pairsWithinContainer">
        <div>
        </div>
        <div>
        </div>
    </div>
</div>

css:

.container {
  width: 100%;
  height: 200px;
  background-color: blue;
  padding: 2px;
}

.container > div {
  display: inline-block;
  width: 49.5%;
  height: 200px;
  background-color: yellow; 
}

.pairsWithinContainer > div {
  display: inline-block;
  background-color: green;
  width: 50px;
  height: 100%;
}

JSFiddle: https://jsfiddle.net/tyzdhzt2/9/

What I want to do: http://sketchtoy.com/67874588

People who know CSS, help please.

Neekoy
  • 2,325
  • 5
  • 29
  • 48
  • You should get rid of the pair containers and make container ' display: flex; flex-direction: row; flex-wrap: wrap ' then the child containers will be ' flex-grow: 1 ' then child container ( div:not(:first-child):not(:last-child) ) ' margin-left: 10px; margin-right: 10px; ) – Win Feb 09 '17 at 00:23
  • I need the pair containers so the divs within will drop 2 by 2 when the window is too small to fit all 4. The question is specifically for having them in pairs :) – Neekoy Feb 09 '17 at 00:27

2 Answers2

2

I'd recommend doing this with display:flex instead of display:inline-block.

Setting the containers to be flex boxes will automatically move your content into one line. flex-direction:row will make this line a row, flex-direction:column will make it a column. Use justify-content:space-around to have the container box distribute even space around all it's children.

To have the first row of containers wrap when the browser shrinks, give those boxes a min-width property and give their wrapping element flex-wrap:wrap like so:

.container {
  width: 100%;
  height: auto;
  background-color: blue;
  padding: 2px;
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

.container > div {
  display: flex;
  justify-content:space-around;
  width: 49.5%;
  height: 200px;
  min-width:400px;
}

.pairsWithinContainer > div {
  background-color: green;
  width: 50px;
  height: 90%;
}
<div class="container">
    <div class="pairsWithinContainer">
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="pairsWithinContainer">
        <div>
        </div>
        <div>
        </div>
    </div>
</div>
Dylan Stark
  • 2,325
  • 17
  • 24
  • 1
    There is more space between the left/right edge and the first green child than between the children. – Michael Coker Feb 09 '17 at 00:28
  • It legitimately took me hours of desperately trying random (for me) stuff. "display: flex" did it right away. I'll read up on those display and float properties in CSS because I have no idea how they work. Thanks a whole lot ^-^ – Neekoy Feb 09 '17 at 00:33
  • 1
    @Neekoy you are welcome! Glad this helped. I updated my answer with a little more info to help you with stacking the boxes on browser re-size. – Dylan Stark Feb 09 '17 at 00:36
  • @DylanStark Oh no, I spoke too fast - it doesn't collapse them in pairs when you shrink the window now. It keeps both pairs on the same row even when it's below their width. :( – Neekoy Feb 09 '17 at 00:43
  • 1
    @Neekoy hmmm in my browser it is stacking the "pairsWithinContainer" divs one on top of the other when the window gets small enough that the "container" box can't contain their `min-width` property. I just set the min-width to a larger value to help this be more visible. – Dylan Stark Feb 09 '17 at 00:59
  • @DylanStark Indeed in the fiddle you posted they behave as expected. There must be a difference between what I have locally and the simplified version I made for the question. I'll figure it out tomorrow, gotta catch some sleep now. Thanks for your time, I really appreciate it :) – Neekoy Feb 09 '17 at 01:11
0

Here's a solution I've drafted up based upon a similar question posed earlier, horizontally center div in a div

I've forked a solution jsfiddle

HTML revision:

I've restructured your HTML a bit to hopefully make it easier to follow through:

<div class="container" id="outer">
    <div class="inner yellow" id="inner1">
        <div class="inner green"></div>
    </div>
    <div class="inner yellow" id="inner2">
        <div class="inner green"></div>
    </div>
    <div class="inner yellow" id="inner3">
        <div class="inner green"></div>
    </div>
    <div class="inner yellow" id="inner4">
        <div class="inner green"></div>
    </div>
</div>

CSS revision:

As with the HTML, I've restructured the CSS a bit to hopefully make it easier to follow:

.container {
    width: 100%;
    height: 200px;
    background-color: blue;
    padding: 2px;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    box-sizing: -moz-border-box;
    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-sizing: -webkit-border-box;
    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
    box-sizing: border-box;
    }

.inner {
    width: 50%;
    height: 100%;
    border: none;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    box-sizing: -moz-border-box;
    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-sizing: -webkit-border-box;
    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
    box-sizing: border-box;
}

.yellow {
    width: 25%;
    background-color: yellow;
    }

.green {
    width: 25%;
    background-color: green;
}

Here's a bit more information about box-sizing from CSS-Tricks

Community
  • 1
  • 1
cpardon
  • 487
  • 4
  • 24