Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

floating elements in <li> breaking li color background

Hi all.. this is a pretty noob issue and when I solve it on my own I'll post how, BUT

I have an < ul > one of its < li > has a background-color and other properties (border / padding etc)

Within that < li > I have two elements, some text and an image.

On a larger screen I want the text to float to the right of the image.

ISSUE: When I set the elements to float, the enclosing < li > is no longer wrapping them, so the background color / enclosing box structure shrinks and is just a bar above the elements.

Question: How do I float the elements and have them stay within the bounds of the parent < li >'s box formatting ??

please post your code so we can take a look at it to better help. Thanks!

 <li id="customize">
      <img src="/img/image.png" alt="" id="imgID" class="leftFloat">
            <div class="rightFloat">
                  <h2 class="p-titles">TITLE</h2>
                  <p>Paragraph Text</p>
            </div>
</li>
.leftFloat {
    float:left;
    width: 40%;
}

.rightFloat {
    float: right;
    width: 40%;
}

li {
    padding: 0 15%; /* increase padding on sides */
}

li p {
    max-width: 600px;
    margin:0 auto;
    padding: 1rem 0;
}

#customize {
    background-color: #54e5d6;
    color: white;
    border-top: 3px solid #eee;
    box-shadow: 0 4px 2px -2px          
        rgba(0,0,0,0.4);
    padding-top: 40px;
    padding-bottom: 30px;
    margin-top: 40px;
}

#customize p {
    color: #367872
}

3 Answers

Found some answers.. a few options:

in html, within the < li > at the end, after all floated content before the close tag i can add a div element that forces a clear:

<div style="clear: both;"></div>

or via css i can add an overflow to the main < li > element:

#customize {
        overflow: auto;
}

I'm thinking OVERFLOW is the way to go.

Thoughts?

Olga Kireeva
Olga Kireeva
9,609 Points

Hello Kavan, it sounds like a very tricky task. I would try to add a div element inside li element and put text and the image inside that div.
Something like that: <li> <div> <p style="float: right">Some text</p> <img style="float:left" src="path to image" alt="" /> </div> </li>

This is sort of what I have.

I just posted the code. The div takes the elements out of the containing < li > and causes the container to shrink behind the elements.

Olga Kireeva
Olga Kireeva
9,609 Points

Thank you for posting your solution, Kavan. It's good to know. Good luck with your projects!