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 trialKavan Bahrami
8,475 Pointsfloating 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 ??
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
8,475 PointsFound 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
9,609 PointsHello 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
8,475 PointsThis 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
9,609 PointsThank you for posting your solution, Kavan. It's good to know. Good luck with your projects!
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 Pointsplease post your code so we can take a look at it to better help. Thanks!