CSS float / inline block issue

Question

Would you please examine this jsFiddle?
Resize the width of the "result" frame.
Observe that the layout of the boxes switches between 2 and 3 columns.

This glitch is anoying I want the layout to look like this and stay like this even when I resize the window:

_________
| ▄ ▄ ▄ |
| 1 2 3 |
| ▄ ▄ ▄ |
| 4 5 6 |
¯¯¯¯¯¯¯¯¯

Could you alter the HTML/CSS to perfect the layout and get rid of the glitch?

Thanks in advance!

Ben · Accepted Answer · 2011-09-11 05:19:33Z

1

http://jsfiddle.net/znPGj/3/ fixes it by setting a height in px on the img boxes

answered Sep 11, 2011 at 5:19

Ben

13.7k4 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Web_Designer Over a year ago

I was thinking of a solution that would enable the pictures to scale. However, I guess this could be an option. Thank you!

sandeep · Accepted Answer · 2011-09-11 05:36:43Z

0

check this example http://jsfiddle.net/sandeep/znPGj/4/ css:

a {
    float:left; 
    width: 33%;
    margin: 0;
    padding: 4px 0;
    color: #000;
    font: medium sans-serif;
    text-align: center;
}
a:nth-child(4){clear:both}
img {
    width: 80%;
}

edited Sep 11, 2011 at 5:36

answered Sep 11, 2011 at 5:27

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-09-11 06:26:40Z

0

You could wrap all the img in a div and set a specific width on the div

Example: http://jsfiddle.net/jasongennaro/znPGj/5/

answered Sep 11, 2011 at 6:26

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Kent Brewster · Accepted Answer · 2011-09-11 06:30:28Z

0

Have you tried dropping the width to 32%? Worked for me, but I didn't test on many browsers.

answered Sep 11, 2011 at 6:30

Kent Brewster

2,5202 gold badges22 silver badges27 bronze badges

Collectives™ on Stack Overflow

CSS float / inline block issue

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related