amoe 0

Hi all,

screenshot

I have the layout shown. The goal is to have three columns. In the first column should be images 1 and 2. Images 3, 4, and 5 should be the middle column. In the third column should be images 6 and 7.

The approach I took is to make each column a div, float the first column left, centre the middle column using the margin: auto method, and float the third column right. I got the images to stack vertically within their columns by using display: block.

However there are a few problems:

  1. The image number 5 is slightly offset from the other images in its column.
  2. The third column, containing images 6 and 7, is vertically aligned below the second column.

Ideally I want the first and third column to be vertically centred with respect to the second column, and horizontally centred in the leftover horizontal space. But at the moment I would settle for the third column being vertically aligned to the top of the page like the first column. As far as I can see the CSS should achieve this, as the third column is floated right.

How can I achieve this layout? I would prefer to get it without using JavaScript and without specifying explicit widths, although percentage widths would be ok.

3 answers

0
points
This was chosen as the best answer

If I've understood your requirements, this should work:

body { background-color: blue; }
div.centre { background-color: green; }
div.left { background-color: teal; }
div.right { background-color: magenta; }

div.main {
    background-color: red;
    width: 95%;
    height: 95%;
    display: table;
}

div.main > div {
    display: table-cell;
    vertical-align: middle;
}

img {
    display: block;
    margin: 0 auto;
    width: 64px;
    height: 64px;
}

Here's a working example. Note that it'll work in all modern browsers, but not IE6/7 (which is why everyone's been trying to do this sort of thing with floats for so long). If you want the height to be 95% of the browser window, rather than 95% of the document, then you'll need to add a rule like this:

html, body { height: 100%; }
Answered about 8 years ago by Rob Crowther
  • Wow, this is absolutely amazing. amoe about 8 years ago
Ktash 1851
2
points

Quick Fix

The quick fix is to move #right above #left. The reason is that right floated content needs to go before content it is floated next to. This should solve both problems, however, it will only solve both because both #right and #left are the same size. If they are not, image 5 will again be misaligned.

Looking for a better solution

You problem is a little unique from what I've seen because you want to center items on each line. I do respect your decision to use as few elements as possible and leave the styling up to the CSS, but it may make it harder. If you find that the above is not quite what you're looking for, I'd recommend looking at other questions/answers on here [Tagged: 3 Column] and also looking at articles around the net on 3-column layouts. Specifically I'd recommend the Holy Grail article at A List Apart.

Answered about 8 years ago by Ktash
0
points

Float the first two to the left, then the last one to the right and give them some widths. Then add an overflow of hidden on main:

.main {background-color:red; display:block; height:95%; overflow:hidden; width:95%; word-wrap: break-word;}
.left, .centre, .right {width:33.333%;}
.left, .centre { float:left}
.right {float:right}
.left {background-color:teal}
.centre {background-color:green}
.right {background-color:magenta}
img {width:64px; height:64px; display:block; margin:0 auto;}

This will cover you for pretty much all browsers... If you are really concerned about having the columns appear to be the same height add giving each an INSANE AMOUNT (longer than you could conceive any page to be ever) of bottom padding and then give it the equivalent in negative margin:

.left, .centre, .right {width:33.333%; padding-bottom:99999em; margin-bottom:-99999em;}

That will get you rolling in all browsers... As for the vertical alignment you can use the padding and margin trick above for ie and rely on the table trick Rob used for modern browsers and then write a behaviour for ie.

Answered about 8 years ago by Darcy Bross