CODEWITHSUNDEEP
htmllayoutcss-floatcss
Web_Designer
Web_Designer

Reputation: 74530

CSS float / inline block issue

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!

Upvotes: 1

Views: 233

Answers (4)

Kent Brewster
Kent Brewster

Reputation: 2520

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

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

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

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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%;
}

Upvotes: 0

Ben
Ben

Reputation: 13615

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

Upvotes: 1

Related Questions