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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Kavan Bahrami
Kavan Bahrami
8,475 Points

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 ??

Jacob Mishkin
Jacob Mishkin
23,118 Points

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

Kavan Bahrami
Kavan Bahrami
8,475 Points 
 <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

Kavan Bahrami
Kavan Bahrami
8,475 Points

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
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>

Kavan Bahrami
Kavan Bahrami
8,475 Points

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
Olga Kireeva
Olga Kireeva
9,609 Points

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