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

Irfan Hussain
PLUS
Irfan Hussain
Courses Plus Student 6,593 Points
Posted by Irfan Hussain
Irfan Hussain
Courses Plus Student 6,593 Points

I want display 2 images together on a page, put its not working using float Plz Help

HTML code:

    <div class="container clearfix">
    <figure class="imgcol"> 
    <figcaption> Experimentation with color and texture. </figcaption> 
    <img src="img/numbers-01.jpg" alt="Irfan Web Developer" />

     <figcaption> Playing with blending mode in photoshop. </figcaption>
    <img src="img/numbers-02.jpg" alt="Irfan Web Developer" />

    <figcaption> Trying to create 80's style glow. </figcaption>
    <img src="img/numbers-06.jpg" alt="Irfan Web Developer" />

    <figcaption> Drips created using Photoshop brushes </figcaption> 
    <img src="img/numbers-09.jpg" alt="Irfan Web Developer" />

    <figcaption> Creating shapes using repetition. </figcaption>
    <img src="img/numbers-12.jpg" alt="Irfan Web Developer" />


    </figure>
    </div>

CSS Code:

.container {
    float: left;
}

figure {
    margin: 0;
}

.imgcol img {
 width: 45%;

}

figcaption {
 width: 30%;
 clear: left;
}

.clearfix::after {
        content: “”;
        display: table;
        clear: both;
}

1 Answer

Daniel Amazigo
PLUS
Daniel Amazigo
Courses Plus Student 11,357 Points
Daniel Amazigo
Daniel Amazigo
Courses Plus Student 11,357 Points

If your intent is to have two sets of images appearing side-by-side using floats, I would 'wrap' each set of images (maybe you want a set of two on the left and three on the right) with a <figure> tag, give one tag a class of "left" and the other "right" and then apply a 

float: left;

to the tag with a class of left and 

float: right;

to the tag with the class - right.

That should do it, although I'm sure there are better ways of styling your images and captions.