Use CSS3 nth-child to alternate the float of images within DIV tags...

Posted by Aaron Rodgers on Stack Overflow See other posts from Stack Overflow or by Aaron Rodgers
Published on 2010-06-07T14:52:08Z Indexed on 2010/06/07 19:12 UTC
Read the original article Hit count: 188

Filed under:
|

Basically, what I'm trying to create is a page of div tags, each has an image inside them and I'm trying to use CSS3's nth-child to alternate the float of that specific image. But for the life of me, I can't get the nth-child to locate those images. Here is my code so far...

CSS

.featureBlock img:nth-of-type(even) {
    float: left;
}

.featureBlock img:nth-of-type(odd) {
    float: right;
}

This is the HTML of one of those div tags....

    <div class="featureBlock">

                <h1>Multisize Players</h1>

                <div class="featureHelpBlock"><a href="#">More help with this</a></div>

                <img src="http://office2.vzaar.com/images/features/ft_multisize_players.png">



                <span class="featureContent"><p>A variety of player sizes is important as we recognise the fact that no two videos or websites are ever the same and you will want something that suits your site&#8217;s look. So if you record your video in 4x3 (not widescreen) or 16x9 (widescreen) we have the range of player sizes to suit your exact needs.</p>

<p>We encode the video at the time of uploading in the size that you choose so that the picture and sound quality is retained throughout. Users can choose from the following sizes:</p></span>

                <br style="clear:both"> 

            </div>

Hope this makes sense...

© Stack Overflow or respective owner

Related posts about css3

Related posts about nth-child