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 Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Nick Tillman
Nick Tillman
12,595 Points
Posted by Nick Tillman
Nick Tillman
12,595 Points

Baseline issues

After watching the video on multi-column layouts, I started playing around with it to see what I could do. I'm working primarily in Firefox (29) for testing. It seems that my <p> tag breaks result in mismatched baselines for the various columns.

Also, it seems to be treating <p> spacing as a line so when paragraphs break right at the end of columns, the spacing may appear at the beginning of the next column.

Is there a way to resolve this without targeting each <p> tag? Doing that will seem to negate using this for responsive design.

2 Answers

Xander Taylor
Xander Taylor
12,390 Points
Xander Taylor
Xander Taylor
12,390 Points

Please post the full code so we can troubleshoot for you. Look at the link for "Markdown Cheatsheet" for formatting of code blocks on post.

Nick Tillman
Nick Tillman
12,595 Points
Nick Tillman
Nick Tillman
12,595 Points

I've posted the code in a message below your response. Somehow I missed the comment link to your response until now.

Nick Tillman
Nick Tillman
12,595 Points
Nick Tillman
Nick Tillman
12,595 Points

Sure. Here's the HTML (pretty basic):

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fun with text</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<div class="container">
    <div id="box">
        <p> Can't even shout, can't even cry. The news isn't there to tell you what happened. It's there to tell you what it wants you to hear or what it thinks you want to hear. I mean, don't get me wrong, I heart my porn, but this is cool!</p><p>You'll fight, and you'll shag, and you'll hate each other 'til it makes you quiver, but you'll never be friends. I figure, if I'm responsible for the end of the world, I get to name it. From now on, we're gonna have a little less ritual, and a little more fun around here!</p><p>Little man loved fire. The gentlemen are coming by. If you can't do something smart, do something right. If the apocalypse comes...beep me! </p>
<p> The living legend needs eggs! I figure, if I'm responsible for the end of the world, I get to name it. Don't care much for fancy parties. Too rough. He'll be an empty-headed robot wondering around Hollywood; he'll be fine! I am obsolete. This must be what old people feel like, and Blockbuster. </p>
<p> It's funny how the Earth never opens up and swallows you when you want it to. If every vampire who said he was at the crucifixion actually was there, it would've been like Woodstock. Eyeballs to entrails, my sweet. It's like somebody slaughtered an Abercrombie and Fitch catalog. And I understand with perfect clarity exactly what you are. I'm a rogue demon hunter now. </p>
    </div>
</div>
</body>
</html>

And here is the CSS:

    body {
    background-color:steelblue;
    margin:0;
    padding:0;
    }

    .container {
    width:70%;
    max-width:700;
    margin:0 auto;
    }

    #box {
    padding:40px;
    margin:0 auto;
    margin-top:30px;
    background:lightblue;
    border-radius:15px;
    -moz-columns:200px 3;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px dotted navy;
    -webkit-columns:200px 3;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px dotted navy;
    }

    p {
    font-family:"Helvetica Neue", Arial, sans-serif;
    color:#444;
    line-height:1.5;
    }
    p:first-child {
    padding-top:0;
    margin-top:0;
    }