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

Posted by Julian Ng
Julian Ng
3,497 Points

One line space on the first column

This is my page-style.css

body{
    background: rgb(54,215,183);
    font-size: 1.3em;
    font-family: sans-serif;
    margin: 40px 0;
}

.main{
    margin: 20px auto;
    padding: 20px;
    background: rgb(46,204,113);
    max-width: 80%;
    border:10px solid rgb(22,160,133);
    border-radius: 10px;
}

This is my style.css

.main{
    -webkit-column-count: 3;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 2px dotted rgb(135,211,124); 
    -webkit-column-width:250px;
}

img{
    display: block;
    margin: 1.5em 0;
    max-width:100%;
}

h1{
    -webkit-column-span: all;
}

This is my HTML

<!DOCTYPE html>
<html>
<head>
    <title>Multi-column Layout</title>
    <link rel="stylesheet" type="text/css" href="page-style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class ="main">
        <h1>Testing</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra maximus tortor, vel mattis odio viverra vel. Praesent eu sapien sed enim maximus iaculis.</p>
        <img src="julian.JPG">
        <p>Phasellus ligula nibh, interdum quis accumsan nec, vulputate maximus neque. Aenean sagittis augue a elit ornare consectetur. Nam elementum, justo eu rhoncus sodales, odio urna fringilla dolor, at condimentum nisi odio a velit. </p>
        <p>Ut hendrerit consequat tempus. Phasellus vestibulum arcu fringilla neque pretium, in accumsan magna vestibulum. Duis in varius dui.]</p>
    </div>
</body>
</html>

So my question is when I divided my main into 3 columns, the first column on the left side seems to have like a break line on top of the sentence. So the second and third column is higher compare to the first column.

What am I missing?

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Julian,

This is happening because the paragraph elements have a top margin by default, if you use a selector like the below one to remove this margin it will align all the columns the same way.

.main p {
  margin-top: 0;
}
Julian Ng
Julian Ng
3,497 Points

Awesome! It solves my problem. Thanks Chris!