Layout Issue: Two Fixed Columns in Center

Question

How can I position Label #2 and Label #3 in the center of the panel div given that Label #1 and Label #4 are floating left and right, respectively.

I would also like to move Label #2 and Label #3 below Label #1 and Label #4 when the browser width reaches a certain height. So Label #1 and Label #4 should be together, as should be Label #2 and Label #3 right below them.

See my example here: http://jsfiddle.net/p7ws5cxx

html, body {
  font-family:'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}
#panel {
  width: 100%;
  background: #ddd;
  display: block;
  height: auto;
  float: left;
}
.box-1, .box-2, .box-3, .box-4 {
  border: 2px solid #aaa;
  background: #fff;
  padding: 1em;
  width: auto;
  float: left;
  border-radius: 2px;
  display: inline-block;
}
.center-box {
  margin: 0 auto;
  float :left;
  border: 1px solid blue;
  text-align: center;
}
.box-4 {
  float: right;
}
@media screen and (max-width: 568px) { 
  .box-1, .box-4 {
    width: 50%;
    float: left;
  }
  .center-box {
    margin: 0 auto;
  }
}

<div id="panel"> 
    <span class="box-1">Label #1</span>
    <div class="center-box"> 
        <span class="box-2">Label #2</span>
        <span class="box-3">Label #3</span>
    </div> 
    <span class="box-4">Label #4</span>
</div>

@kolor if you can draw 2 images 1.normal and 2.narrow to describe what you need it would be very helpful. — Stickers, Mar 03 '15 at 00:03

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Assuming that changing the order of HTML elements is allowed, the layout can be achieved by floating the .box-1/.box-4 to left/right and displaying the other boxes as inline elements.

Then in order to align them at the center of the panel, we can add text-align: center to the .center-box element.

Also note that in an inline flow, there's a whitespace between inline-level elements. One option to remove the gap is to set the font-size of parent to 0 and then re-set it to the default value on children.

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font: 500 14px 'Helvetica Neue', Arial, sans-serif;
}
#panel {
    background: #ddd;
}
#panel:after,
#panel:before {
    content: "";
    display: table;
}
.box-1, .box-2, .box-3, .box-4 {
    border: 2px solid #aaa;
    background: #fff;
    padding: 1em;
    border-radius: 2px;
}
.box-1 {
    float: left;
}
.box-4 {
    float: right;
}
.box-2, .box-3 {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.center-box {
    border: 1px solid blue;
    text-align: center;
    font-size: 0;
}

@media screen and (max-width: 568px) { 
    [class^="box-"] {
        width: 50%;
    }
}

<div id="panel"> 
    <span class="box-1">Label #1</span>
    <span class="box-4">Label #4</span>
    <div class="center-box"> 
        <span class="box-2">Label #2</span>
        <span class="box-3">Label #3</span>
    </div> 
</div>

This is a great explanation. Thank you for your help. – kaoscify Mar 03 '15 at 22:37 — kaoscify, Mar 03 '15 at 22:37

Layout Issue: Two Fixed Columns in Center

1 Answers1