Centering container in CSS, after deleting a 4th box

Question

I have deleted a 4th box as i only need 3 and want the centre the 3 boxes. Here is an image. This is my CSS Code. Below is the HTML code, Keeps saying there is too much code so I am filling up this part with more text so hopefully I can get some help at some point, hopefully this is enough text to code now ?

#featured-wrapper {
  overflow: hidden;
  padding: 5em 0em;
  background: #FFF;
}

#featured h2 {
  text-align: center;
}

#featured .icon {
  position: relative;
  display: block;
  background: #2A70E8;
  margin: 0px auto 20px auto;
  line-height: 2.5em;
  font-size: 4em;
  text-align: center;
  color: #FFF;
}

.column1,
.column2,
.column3,
.column4 {
  width: 282px;
}

.column1,
.column2 {
  float: left;
  margin-right: 24px;
}

.column3 {
  float: left;
}

.column4 {
  float: right;
}

<div id="featured-wrapper">
  <div id="featured" class="container">
    <div class="major">
      <h2>Maecenas lectus sapien</h2>
      <span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
    </div>
    <div class="column1">
      <span class="icon icon-bar-chart"></span>
      <div class="title">
        <h2>Maecenas lectus sapien</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column2">
      <span class="icon icon-qrcode"></span>
      <div class="title">
        <h2>Praesent scelerisque</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column3">
      <span class="icon icon-building"></span>
      <div class="title">
        <h2>Fusce ultrices fringilla</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>

  </div>
</div>

Post you HTML Code otherwise it's hard to help you... Best would be if you could create a JSFiddle — Nils Schlüter, Aug 06 '17 at 16:52

score 0 · Answer 1 · answered Aug 06 '17 at 17:00

we need to see your HTML to give You a correct Answer but try this replace this code

#featured-wrapper {
    overflow: hidden;
    padding: 5em 0em;
    background: #FFF;
}

with this

#featured-wrapper {
    width:900px;
    margin:0 auto;
    overflow: hidden;
    padding: 5em 0em;
    background: #FFF;
}

and you can change this number 900 with the best width for the HTML

score 0 · Answer 2 · answered Aug 06 '17 at 17:01

Try wrapping the 3 columns in a div with a columnwrap class like:

.columnwrap {
width: 846px; //width of your 3 columns combined, add px for padding if needed
margin: auto;
}

then:

<div class="columnwrap">
<div class="column1"></div>
<div class="column1"></div>
<div class="column1"></div>
</div>

You are going to need to clearfix the three floats before the closing div tag on the columnwrap. This should do the trick.

score 0 · Answer 3 · answered Aug 06 '17 at 17:10

you can avoid float and use .column {display:inline-block} + .parent .column {text-align:center}.

Snippet to test below

#featured-wrapper {
  overflow: hidden;
  padding: 5em 0em;
  background: #FFF;
  text-align:center;/* new */
}

#featured h2 {/* cleaned up */
}

#featured .icon {
  position: relative;
  display: block;
  background: #2A70E8;
  margin: 0px auto 20px auto;
  line-height: 2.5em;
  font-size: 4em;
  text-align: center;
  color: #FFF;
}

.column1,
.column2,
.column3,
.column4 {
  width: 282px;
  display:inline-block;/* new instead float*/
  margin:0  10px;/* update*/
}

.column1,
.column2 {/* cleaned up */
}

.column3 {/* cleaned up */
}

.column4 {/* cleaned up */
}

<div id="featured-wrapper">
  <div id="featured" class="container">
    <div class="major">
      <h2>Maecenas lectus sapien</h2>
      <span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
    </div>
    <div class="column1">
      <span class="icon icon-bar-chart"></span>
      <div class="title">
        <h2>Maecenas lectus sapien</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column2">
      <span class="icon icon-qrcode"></span>
      <div class="title">
        <h2>Praesent scelerisque</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column3">
      <span class="icon icon-building"></span>
      <div class="title">
        <h2>Fusce ultrices fringilla</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>

  </div>
</div>

Worked like a Gem !!, Thanks so much you've made my day. I am loving the community already, Massive thanks — Cyclingjas, Aug 06 '17 at 17:19

Centering container in CSS, after deleting a 4th box

3 Answers3