Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Liz Karaffa
Liz Karaffa
17,576 Points

How do I display image flush with other images after a clear?

I've included a screen shot of what I currently have and how I want it fixed here: http://i.imgur.com/urAI4UF.png

Here is the simplified HTML code for my project (I have 19 images that I'm building in a complex grid and so I'm only including the trouble images since the others are playing nice together):

<div class="wrapper">
    <div class="images">
        <div class="col col-1-3">
            <div class="module" id="img-10">
                <img src="img/pic_10.png">
            </div>
        </div>
        <div class="col col-1-3 clear">
            <div class="module" id="img-11">
                <img src="img/pic_11.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-12">
                <img src="img/pic_12.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-13">
                <img src="img/pic_13.png">
            </div>
        </div>
    </div><!--.images -->
</div><!--.wrapper -->

CSS:
* { 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box:
}
.wrapper {
    width: 1000px;
    margin:0 auto;
}
.grid {
    overflow: hidden;
}
    .col{
        float: left;
    }
    .col-1-5 {
        width: 20%;
    }
    .col-1-3 {
        width: 33.3333%;
    }
    .col-2-5 {
        width: 40%;
    }
    .col-2-3 {
        width: 66.6666%;
    }
    .col-3-5 {
        width: 60%;
    }
.module img {
    width: 100%;
    height: 100%;
    padding: 3px;
}
#img-10 {
    height: 194px;
    width: 333.33px;
}
#img-11 {
    height: 194px;
    width: 333.33px;
}
#img-12,
#img-13 {
    height: 388px;
    width: 333.33px;
}
.clear {
    clear: both;
}

Img 11 has a clear so that it will tuck itself under image 10, but then I can't get img 12 and 13 to go level with image 10. If I don't do the clear on img-11, it will be side by side with img-10.

1 Answer

Chris Shaughnessy
Chris Shaughnessy
26,175 Points

I'm not sure if this is the best practice or not, but it looks like you can share images 10 and 11 to one column.

If you remove the closing div for image 10 and opening div for image 11's column:

</div>
        <div class="col col-1-3 clear">

it should do the trick.

Your html would show as follows: 

<div class="wrapper">
    <div class="images">
        <div class="col col-1-3">
            <div class="module" id="img-10">
                <img src="img/pic_10.png">
            </div>
            <div class="module" id="img-11">
                <img src="img/pic_11.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-12">
                <img src="img/pic_12.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-13">
                <img src="img/pic_13.png">
            </div>
        </div>
    </div><!--.images -->
</div><!--.wrapper -->
Liz Karaffa
Liz Karaffa
17,576 Points

Brilliant!!!! you are a genius! that totally worked!