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 mryoung
mryoung
4,156 Points

Two Column Layout Problems

Hello,

I'm trying my hardest to understand what's not working correctly here and why. I want this to be below some content on my page, side by side with a bit of margin in between both columns. What I get instead is one column almost completely under the other.

Here is my HTML:

<div class ="wrapper clearfix">

        <div class = "col">
            <img src="img/child.png" alt="an image" class="techimage">
            <div class = " description">
            <h2> blah blah blah</h2>
            <p>
                blah blah blah blah blah blah blah blah blah blah blah blah 
                Look below to find links to excellent resources in the area.
            </p>

                <ul>
                    <li>blah blah blah </li>
                    <li>blah blah blah </li>
                    <li>blah blah blah </li>
                    <li>blah blah blah </li>
            </ul>

</div>

            <div class ="col2">
                <img src="img/planning.jpg" alt="an image of a student with a laptop" class ="resources">

            <h2>Helpful Resources</h2>
            <p>blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah </p>

            <ul>
                                   <li>blah blah blah </li>
                                   <li>blah blah blah </li>
                                   <li>blah blah blah </li>
                           </ul>



    </div>
</div>

</div>

Here is my CSS:

.wrapper { width: 90% margin-left: 10px; margin-right: 25px; min-height: calc(100vh -70px); }

/* Floated columns ------------- */

.techimage, .resources {

width: 30%;

}

.col {

float: left;
margin-right: 1em;
margin-left: 25px;
width: 50%;

}

.col2 {

float: right;
margin-right: 25px;
width: 50%;

}

.clearfix::after {

content: "";
display: table;
clear: both;

}

4 Answers

trio-group I.AM
trio-group I.AM
25,713 Points
trio-group I.AM
trio-group I.AM
25,713 Points

Hey!

There is an error in your markup. The second column is nested in the first column instead of being a direct child of the wrapper div.

After you've fixed this, remove the margins on your columns (because they are being added to the 50% content width thus causing the elements to appear on top instead of next to each other) and set the float property of both columns to left. You could create a simple class that applies to both elements instead of using two different classes. It could look something like this:

.column {
width: 50%;
float: left;
padding: 0 1em;
}

Try playing around in your browser's dev tools to find the perfect values for your elements.

Also, it is worth noting that flexbox would make your life much easier when dealing with rows and columns.

Hope this helps!

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

Your code is pretty hard to read in this format but i believe its not working because you've set both columns to 50% AND given them margins. That is why your second column is positioned below. Because its being pushed down there.

Do these 3 things and it should work:

  1. remove the margins

  2. copy and paste this to the top of your css page

    * {
box-sizing: border-box;
}

  3. set the padding for .col and .col2 to 16px or whatever you want.

This should work. If not, reduce the width to say 49%.

This is one way to do it, there are loads of different ways to achieve what you want.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

I see two issues:

  • the "col2" div is currently inside the "col" div, you probably intended for them to be peers
  • the width of 50% doesn't allow for margins, try something smaller or use calculations

And when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

mryoung
mryoung
4,156 Points
mryoung
mryoung
4,156 Points

Thank you all!

I rearranged my Column divs, took out the margins and it looked a lot better. Then I had to deal with the content being far to the left. At first I tried using padding to center align it, but that wasn't working too great so then I just center aligned the wrapper div.

Is this the best way to achieve two center aligned columns?

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

It might be your wrapper. Set the margin to this:

margin: 0 auto;
Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

"trio" had a good idea. Flexbox was created specifically to overcome issues with floats.