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 Carl Smith
Carl Smith
8,185 Points

I can't get float to work on my images

As shown in style-the-image-captions video for CSS with Nick Pettit, by using the "Float: left;", it should move everything o the left. However, it pushes the images to the right and the paragraphs to the left. I don't know if this is an issue with Safari, because he is using Google Chrome, or if I did something wrong in my code. 

 #gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}

<section>
                <ul id="gallery">
                    <li>
                        <a href="img/numbers-01.jpg">
                            <li><img src="img/numbers-01.jpg" alt=""></li>
                            <p>Experimentation with numbers and colors.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-02.jpg">
                            <li><img src="img/numbers-02.jpg" alt=""></li>
                            <p>Playing with bleninding modes in photoshop.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-06.jpg">
                            <li><img src="img/numbers-06.jpg" alt=""></li>
                            <p>Trying to create an 80's style.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                            <li><img src="img/numbers-09.jpg" alt=""></li>
                            <p>Drips using brushes.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                            <li><img src="img/numbers-12.jpg" alt=""></li>
                            <p>Creating shapes using repetition.</p>
                        </a>
                    </li>
                </ul>
            </section>

2 Answers

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

It's an issue with your HTML rather than your CSS - you are nesting a list item within a list item, which causes the browser to interpret them as separate list items within the unordered list.

As a result, the browser displays an empty 45% list item floated to the left, then another list item with your image floated next to it - making it appear as though it's moved the image to the right.

Here's a screenshot of how Firefox is rendering each of your list items

So if you remove the extra <li> tags around your image it should start to look more like how you intended.

Carl Smith
Carl Smith
8,185 Points
Carl Smith
Carl Smith
8,185 Points

THANK YOU! I can't believe I missed that, I forgot to remove those list items. I just kept overlooking them.

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

No worries, if you've not started using the Developer tools in Firefox/Chrome I'd highly recommend checking them out - they can save you a lot of headaches! Nick Pettit has a good video series to get you started.