Table image resizing & alignment in fluid grid

Question

I have a fluid grid layout with a table containing 3 images. If I put text in the table, it resizes correctly. However, when I put images in the table cells, the fluid grid breaks for the images in the cells in Firefox. It works fine in Chrome though.

Anybody know how to get this working?

Alternatively, I put the images in a div and they resize properly, but I'm not sure how to get equal spacing of the 3 images horizontally across the page, they're always slightly to the left.

I've tried the example on the thread below, but even copying the code and CSS as the images are spaced correctly, but don't resize with the fluid grid.

Fluid width with equally spaced DIVs

If I keep the .box1, .box2, etc at the default 150px in this code the images are too small and don't resize fluidly, but are spaced evenly across the page. If I change it to 33.3% the images are a good size and scale with the page, but the spacing is all broken. I've tried a combination of adding the image sizes to the html, and changing the .box width, but I can't find a combination that seems to work... — Ryan Kennett, May 25 '13 at 15:28
So basically what I'm asking is if anyone knows how to display both responsive AND equally spaced images? :) — Ryan Kennett, May 25 '13 at 15:41
I must have some padding code somewhere or something as I set the width of the .box to 32% and now they scale and are spaced correctly! Bizarre! — Ryan Kennett, May 25 '13 at 15:56
Hmm. I spoke too soon. The divs are equally spaced, and the images are scaling correctly, but it isn't quite lining up right. Whilst text in the boxes aligns to the middle of the div, the images are sitting on the left... — Ryan Kennett, May 25 '13 at 16:25
Ok, finally solved the alignment problem. Added the css: #container img{ display:block; margin-left:auto; margin-right:auto; } - Unfortunately now some of the divs are wrapping when resized to mobile size! Dammit! — Ryan Kennett, May 25 '13 at 16:32

score 0 · Answer 1 · answered May 27 '13 at 09:51

33.3333% works great if you have float:left and box-sizing: border-box in which case gutters and spacing works inward. But because you want (unless I'm wrong) the image on the left to stick to the left (with no spacing on the left) and right image to stick to the right (no spacing to the right), border-box will not be the shortest solution without adding extra styles, hence making the percentages smaller is the fastest solution - allowing the browser to have more that 1% to split between the gutters.

Moving on to the solution, I'm assuming that your images are of the same size and fills the entire .box. Check http://jsfiddle.net/jennift/YkvPn/2/.

Correct me if this is not what you are looking for.
CSS:

#container {
    width:100%;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    background:#000; /*for illustration purposes*/
}
#container [class*="box"] {
    width: 30%; /*change this value to see the changes on fluid layout */
    vertical-align: top;
    display: inline-block;
    background:#f00; /*for illustration purposes*/
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
#container div > img {
    width:100%;
}

Table image resizing & alignment in fluid grid

1 Answers1