Set a responsive layout for 4 divs that are in a footer. Needs to stay centered on all sides relative the edges of the footer

Question

Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is. Boxes have to stay 100px by 100px.

Here is a rough illustration of what I mean: http://s14.postimg.org/58xunsv0h/example_of_boxes.png

#footer {
 width: 100%;
 clear: both;
 text-align: center;
 background-color: black;
 opacity: 0.7;
 height: 200px;
}

#fbox1 {
 border: 5px outset #ea2f2f;
 width: 100px;
 height: 100px;
 position: inline-block;
 float: left;
}

#fbox2 {
 border: 5px outset #ea2f2f;
 width: 100px;
 height: 100px;
 position: inline-block;
 float: left;
}

#fbox3 {
 border: 5px outset #ea2f2f;
 width: 100px;
 height: 100px;
 position: inline-block;
 float: left;
}

#fbox4 {
 border: 5px outset #ea2f2f;
 width: 100px;
 height: 100px;
 position: inline-block;
 float: left;
}

<body>
<div id="footer">
 <div id="fbox1">
 </div>
 <div id="fbox2">
 </div>
 <div id="fbox3">
 </div>
 <div id="fbox4">
 </div>
<div>
</body>

Hmm try setting the margin of each one to margin: 1em auto 1em auto; might work might not — Tai Kwangi Chicken, Dec 17 '14 at 03:34
You should make a table with one row 4 cells and put one div in each cell aligned central. Make the table width 100% of the footer. — Tai Kwangi Chicken, Dec 17 '14 at 03:59
Even though tables are for "tabular data", this solution is best across the board, the `` tag is supported in every browser unlike the newer `display:flex`, and even `display:table`. — NightSpark, Dec 17 '14 at 22:32

Abhitalks · Accepted Answer · 2014-12-17T07:15:40.253

You have two very simple ways to do that.

If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.

In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.

The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content

Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/

Snippet:

footer {
    background-color: #000; opacity: 0.7;
    height: 200px;
    display: flex;
    justify-content: space-around; /* this is important */
    align-items: center; text-align: center;
}
footer > div {
    border: 1px solid red;
    width: 100px; height: 100px;
    margin: 0 auto; /* this is important */
}

<footer>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
<footer>

If you really need to support older browsers i.e. back up to IE-8, FF-31, GC-31 etc., then you could make use of display:table and display:table-cell to achieve that. This is also very simple, but you would have to change your markup a little bit. Just wrap your inner-divs inside wrapper-divs. Apply display to the footer container and the wrapper-divs.

The trick here is to use the display:table-cell on the wrapping divs which, will cause them to evenly distribute. But, this will cause them to stretch. To mitigate this, we apply vertical-align to the wrapper divs and also a margin: auto to the inner divs.

Fiddle: http://jsfiddle.net/abhitalks/Lvysyuuh/

Snippet:

#footer {
    background-color: #000; opacity: 0.7;
    width: 100%; height: 200px;
    display: table; /* this is important */
}
#footer > div {
    display: table-cell; /* this is important */
    text-align: center; vertical-align: middle; /* this is important */
}
#footer > div > div {
    border: 1px solid red;
    width: 100px; height: 100px;
    margin: 0 auto; /* this is important */
}

<div id="footer">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
<div>

score 0 · Answer 2 · answered Dec 17 '14 at 04:11

//HTML BLOCK

<div id="footer">
    <div class="fbox"></div>
    <div class="fbox"></div>
    <div class="fbox"></div>
    <div class="fbox"></div>
<div>

//CSS BLOCK

#footer {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items:center;
    width: 100%;
    background: black;
    opacity: 0.7;
    height: 200px;
}
.fbox {
    display: flex;
    display: -webkit-flex;
    flex: 1;
    -webkit-flex: 1;
    min-height: 100px;
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
    margin: 0 auto;
    border: 5px outset #ea2f2f;
}

**Please provide an explanation** about what is going on here and make sure to provide a note [about browser compatibility](http://caniuse.com/#feat=flexbox). Also, the `-webkit-` prefixed properties should be placed *before* the non-prefixed. This way supporting browsers, such as Chrome from version 29, will use the non-prefixed, standard property. — misterManSam, Dec 17 '14 at 05:35

score 0 · Answer 3 · edited May 23 '17 at 10:33

Alternative to flex box if you can't use that for compatibility reasons:

The formula for the width of the space between blocks is (footer_width - 4*box_width)/5. Basically you've got a percentage width minus a fixed width: footer_width/5 - 4*box_width/5 -> 20% of footer width - 4*110px/5 -> 20% - 88px. Note the boxes actually take up 110px because of the border. We can do this at least two ways:

Using float:

You want 20% - 88px between each box. Float each box to the left with a margin-left of 20%. Then pull the boxes to the left by setting a negative right margin on each box. this does not effect the first box, but does make the space between boxes correct, so position all of them relatively and move them over 88px to the left.

#footer {
    width: 100%;
    clear: both;
    background-color: black;
    opacity: 0.7;
    height: 200px;
    box-sizing: border-box;
    position: relative;
}

div div {
    border: 5px outset #ea2f2f;
    width: 100px;
    height: 100px;
    float:left;
    margin-left:20%;
    margin-right:-88px;
    position:relative;
    left:-88px;
    top:45px;
}

This way feels a little fragile to me, but I can't immediately see why...

Using absolute positioning:

You want 20% - 88px between each box. Start with the first box. Move it over 20%, then back left 88px by using the left and margin-left properties. Next box we need to move the same, but from the right edge of the first box, so we need to move it over 20% - 88px + 110px to get to the right edge of the first box, then the +20% - 88px again, giving 40% - 66px. Repeat for each box. You can see the pattern below. Note the position:relative on #footer.

#footer {
    width: 100%;
    clear: both;
    background-color: black;
    opacity: 0.7;
    height: 200px;
    box-sizing: border-box;
    position: relative;
}

div div {
    border: 5px outset #ea2f2f;
    width: 100px;
    height: 100px;
    position: absolute;
    top:45px;
}

#fbox1 {
    left: 20%;
    margin-left: -88px;
}

#fbox2 {
    left: 40%;
    margin-left: -66px;
}

#fbox3 {
    left: 60%;
    margin-left: -44px;
}

#fbox4 {
    left: 80%;
    margin-left: -22px;
}

You might also be able to use inline-block with text-align:justify as seen here: "text-align: justify;" inline-block elements properly?

Hope this helps!

EDIT: Just noticed your req that they be vertically centered as well. In this case, because you have a fixed height container and fixed height boxes, in both cases above you just have to nudge each box down by (200px - 110px)/2 = 45px which can be done with top:45px;.

Set a responsive layout for 4 divs that are in a footer. Needs to stay centered on all sides relative the edges of the footer

3 Answers3