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 Carlos Serrano
Carlos Serrano
3,351 Points

How can I make two lists align left with no-wrapping text?

Hello everyone,

I'm trying to build a div with an image (float left) some text paragraph (right of the image) and two columns of lists below and aligned with the paragraph to the left.

I haven't been able to make the lists not wrap around the image as I did with the <p> using the overflow:hidden; property.

Also the lists will stack for smaller screen sizes Any help is greatly appreciated.

Here's the Codepen of what I have so far http://codepen.io/carlos_serrano/pen/ikjeg?editors=110

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You really just need a left margin on the .linkcontainer div to match the width of the image and its margins/padding.

Here's a forked pen of yours: http://codepen.io/anon/pen/InvcG

Note that I also commented out the clear: both; rule, which brings the lists up closer to the paragraph, but you can uncomment it to make them always positioned under the bottom of the image.

Carlos Serrano
Carlos Serrano
3,351 Points

Thank you Iain. This is exactly what I was looking for. I was getting kind of frustrated since I wasn't being able to make the text adjust to the browser window when I resized it as you can see in this Codepen: http://codepen.io/carlos_serrano/pen/jrcFu

Again than you.

Edward Seibert
Edward Seibert
32,055 Points
Edward Seibert
Edward Seibert
32,055 Points

I'm not sure why you have the overflows there. I'm also not sure if this is an answer to your question, but if you don't want the lists wrapping around the image, the easiest way to fix it is to add a float clear to the "linkcontainer" div. It would look like this:

img{
float:left;
margin: 0 25px;
 }

.linkcontainer {
    width: 60%;
    padding-bottom: 25px;
    clear: both;
}
.linkleft, .linkright {
    display: block;
    width: 100%;
  float: right;
}

@media only screen and (min-width: 481px) {
    .linkleft, .linkright {
        display: inline-block;
        width: 30%;
        float: left;
    }
}
Carlos Serrano
Carlos Serrano
3,351 Points
Carlos Serrano
Carlos Serrano
3,351 Points

Thank you for your response Edward.

I tried adding the float clear to divcontainer, but now the lists are always under the image. Maybe I'm not being clear. Sorry about this. Here's an example of what I want to achieve. Again thank you for your time and let me know if you come up with ideas.

https://scarlos2k.files.wordpress.com/2014/09/wireframe.jpg