CODEWITHSUNDEEP
htmlcssgallery
Daniel Hernandez
Daniel Hernandez

Reputation: 587

Floating of gallery image

In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?

This is the whole code CSS.

This is the whole code HTML.

HTML:

<div class="text-block7" > <a href="gal/60.png" class="gal2" rel="gal"><img src="gal/thumb/60.png" alt=""></a> </div>

CSS:

#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}

Upvotes: 3

Views: 130

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

this happens because your 4th image is higher, so the 7th image when is floating to the left is slamming against that element.

to prevent this kind of behaviour just define a css rule that applies a clear:left on every 3n + 1 div involved: e.g.

div[class^="text-block"]:nth-child(3n + 1) {
   clear: left;
}

Note: the nth-child pseudoclass unfortunately doesn't work on IE8, but if you need to absolutely support that browser you may simply use display: inline-block and vertical-align: top instead of floating elements

Upvotes: 2

Nick R
Nick R

Reputation: 7784

Before the 7th div block add:

<div style="clear:left"></div>

Upvotes: 3

Related Questions