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 Styling Web Pages and Navigation Style the Portfolio

Collin Rijnvis
Collin Rijnvis
2,377 Points
Posted by Collin Rijnvis
Collin Rijnvis
2,377 Points

The two-column layout does not work when one of the <p> items in the <ul> is much longer than the others. How to solve?

When one of the <p> items has a much longer text than the next one, and you resize the browser to very small, the two-column layout 'breaks'. This happens when the text in the first <li> goes from one line (wide browser window) to two lines (small browser window). What is the solution?

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Collin,

I think your just experiencing responsive design by the sounds of it.

If you post your code so we can get a better look we can see if you have a error.

Collin Rijnvis
Collin Rijnvis
2,377 Points
Collin Rijnvis
Collin Rijnvis
2,377 Points

Here;s the HTML, and CSS below that. I make two columns of list-items by letting them 'float left' and make the width 45% with a margin of 2.5%. See the CSS code. And the first list-item has a paragraph with a little longer tekst. When you make the browser real small, this line of text becomes two lines. And this somehow pushes the third list-item to the right and out of sequence. Thanks for taking a look. HTML:

<div id="wrapper">
            <section>
                <ul id="gallery">
                    <li>
                        <a href="img/wijnveld.jpg">
                            <img src="img/wijnveld.jpg" alt="">
                            <p>Wines from all places of the world</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/wijn_spijs.jpg">
                            <img src="img/wijn_spijs.jpg" alt="">
                            <p>With a little bite</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/wijnkurken.jpg">
                            <img src="img/wijnkurken.jpg" alt="">
                            <p>That's a lot!</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/wijn_en_vaten.jpg">
                            <img src="img/wijn_en_vaten.jpg" alt="">
                            <p>So much to drink!</p>
                        </a>
                    </li>
                </ul>
            </section>
            <footer>
                <a href="http://www.twitter.com">
                    <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
                </a>
                <a href="http://www.facebook.com">
                    <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
                </a>
            </footer>
        </div>

CSS:

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

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

#gallery li a p
{
    margin: 0;
    padding: 2.5%;
    color: 
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I see what you mean now Collin, its hard to picture exactly what is going on by just reading what the problem is.

This is caused by the browser trying to figure out what it should do in this situation, its your design breaking down.

The solution is to use responsive design to counter the breakdown of your page.

When it starts to breakdown that is the time to change your layout. In the situation your in I would recommend going from having two text boxes across to having a breakpoint set just before the layout breakdown then change it to having each box take up 100% width and have four boxes one on top of the other.

I hope I've explained that clearly enough, please give me a shout if you need anything cleared up or need more help.

Collin Rijnvis
Collin Rijnvis
2,377 Points
Collin Rijnvis
Collin Rijnvis
2,377 Points

So is it possible to make a layout and then depending on some sort of criteria (for instance changed browser size) to automatically change the layout settings? I guess that will come up in future lessons. Since I just started I will just continue the course and leave this for now. But thank you for the quick reply's!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Colin,

Yes its known as responsive design, you actually design for the smallest size to start with, so your layout would start with one paragraph above the other, then as your browser size gets bigger you would change your layout so the paragraphs were side by side.

Like you said, you'll get into that as you progress through the lessons.

Good luck.