0

Apologies for what is probably a very simple question with a very simple answer. No matter what I do, I can't get this to look like I'm wanting.

Basically, we're going to have 4 advertisements, each 140x140, spread evenly across a container that is 660px wide. But to start, we're only going to have 2 (Will increase to 4 as advertiser demand increases). So right now, I'd like to have 2 140x140 containers centered in a 660px wide div, with a gap between them. As containers 3 and 4 are added to this row, 1 and 2 should be shifted left automatically by simply adding a new container based on containers 1 and 2.

Basically, what I'm wanting is that if I have one ad in the container, it is centered. If I have two ads in the zone, they are centered. 3, centered. 4, centered. Each must be in its own container as the ad script inserts the ad based on container ID.

Advertisements centered

I hope this is clear, but if not please let me know. I can get the 4 containers to line up with each other by simply float: left'ing each one of them, but when there are only two containers in the row, this keeps things from being centered unless I add an offset (Which then has to be recalculated when we add another advertisement to the row).

Kevin
  • 512
  • 4
  • 15

2 Answers2

1

You can use text-align:center on the parent class and display:inline-block for the children. They will be centered regardless of how many there are

Demo. Try removing the ad elements to see for yourself

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • This is what I was planning on doing, but had read that inline-block didn't work well in IE. Was I reading outdated info? – Kevin Mar 04 '14 at 22:44
  • @Kevin Only the oldest IE browsers had a problem, but as long as you [add the IE fix](http://stackoverflow.com/a/8692029/2065702) it will work perfectly, even in IE8 – Zach Saucier Mar 05 '14 at 02:30
0

Check out bootstrap to see how they handle their columns. It might take some digging to find actual width(s), but they are in there.

For example, a 3 column layout gives each column a width of 33.33333%. This is pretty rough, but should give you and idea what I'm talking about:

.column {
    float: left;
    width: 33.33333%;
    box-sizing: border-box;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

The more columns/elements, the higher the % will become.

Use caution though, depending on your browser support, "box-sizing" may or may not be available. In which case, you might have to get creative.

Damon
  • 4,151
  • 13
  • 52
  • 108