[Solved] margin pushing floated div down

[claire2013]

Hi guys,

I am a little new to web development and would love some help. Right now, I really want to understand floats and how they work.

So far, I have 5 rows of images floated to the left with 3 images in each row.

Every time I add a margin or margin-right of 20px, the last img gets pushed down to the next row :/

Here is my HTML

<

div class=”wrapper”>

<

div>

CAPTION

                    <div>
                    <div class="image_row">
                    <a href="#"><img class="space" src="img"></a>
                    <p><br> <span class="works">CAPTION</span><br> </p>
                    </div>

                    <div>
                    <div class="image_row">
                    <a href="#"><img class="space" src="img"></a>
                    <p><br> <span class="works">CAPTION</span><br> </p>
                    </div>
                </div>

                                     <div>
                    <div class="image_row">
                    <a href="#"><img class="space" src="img"></a>
                    <p><br> <span class="works">CAPTION</span><br> </p>
                    </div>

                    <div>
                    <div class="image_row">
                    <a href="#"><img class="space" src="img"></a>
                    <p><br> <span class="works">CAPTION</span><br> </p>
                    </div>

                    <div>
                    <div class="image_row">
                    <a href="#"><img class="space" src="img"></a>
                    <p><br> <span class="works">CAPTION</span><br> </p>
                    </div>
                </div>

                        (....and there's another 3 rows)

And here’s the CSS that I’m using

.space{ width: 360px; height: 216px; }

.image_row{ float: left; width: 360px; height: 288px; margin: 24px; }

.wrapper{ background-color: aqua; width: 1128px; height: 1632px; margin-top: 144px; margin-left: 24px; }

Thanks guys for the help

[claire2013]

[claire2013]

Thanks Josh, I’ll be watching.

[claire2013]

@John Thanks, I was able to figure it out. The div to the far right had the same class as the other divs with with a margin-right of 24px. It flowed nicely once I removed the class.

I will use code pen next time. Thanks so much!

[Author]

Posts