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 Andrew Stelmach
Andrew Stelmach
12,583 Points

Hack No.2 - a strange thing, plus an epic challenge.

I've added some crazy colours again to make things easier to see. Check on the bottom of the second column (gray). It overlaps the yellow div.

http://codepen.io/andrew_stelmach/pen/iHEpc

Why on earth is that?

And why on earth does it fix it when I set position:relative; for the yellow div (.back-to-top)?

It fixes it, but I'm worried there might be future repercussions. I would really like to understand what's going on here.

EPIC CHALLENGE: I've constructed two different ways to construct these columns in the CSS: a float method, and an absolute positioning method. The float method is commented out in the CSS for you to see.

I initially used the float method, but the second column's height wouldn't fill the parent container (.content-row).

I couldn't find a solution to this. Do you know of a solution? I would like a solution because it would mean I could use a background colour in the second column and it wouldn't look crap.

So, I opted for the absolute positioning method. The problem with this, is that you have to give the parent container (.content-row) a fixed min-height or height.

This isn't ideal. Is there a way for .content-row's height to be governed by the height of the biggest column?

PS before playing around with it, make your viewport go narrow and then wide, to make sure the media queries have kicked-in.

PPS please also bear in mind that I think any changes to the code are automatically saved, so of course play around with the code in codepen, but please put it back to how it was originally, and copy/paste your solution(s) here.

4 Answers

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I can tell you that there are two other ways to lay out your columns: inline blocks and flexbox.

Using inline blocks is a pretty good tactic if you just want divs to appear side-by-side without much else control. It seems like it's exactly what you want, so I thought I'd throw that out there. It also has pretty good browser support (except in IE6-7, naturally).

To use inline blocks, do the following on the items you want to be displayed side-by-side:

.col {
    display: inline-block;
}

Also, you should seriously consider using flexbox. It gives you a lot of control over how items are displayed. Unfortunately, browser support for it isn't great. It's not supported at all until IE10, and the latest spec only in IE11. Older WebKit browsers (except Chrome) also use an older spec.

If you want just a basic columns display, the following would probably do. Apply this to the container that holds the column divs:

/* Apply to columns container */
.cols-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
            justify-content: space-around;
}

/* Apply to columns themselves */
.col {
    width: 33%; /* or whatever width you'd prefer */
}

EDIT: I will add that Guil has a great course on CSS Layout Techniques, in which he covers a lot of common layout methods.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I looked more at your CSS, and I think you're experiencing the infamous clearfix bug when you attempt to use float layouts. If you'd like to just use floats, try adding this CSS to your stylesheet and applying the cf class to the parent of your columns:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

Also, I'm trying to answer your question. I just thought I'd offer up other solutions that are somewhat less hacky. :) I haven't done a whole lot with absolute positioning.

Andrew Stelmach
Andrew Stelmach
12,583 Points

Oops, didn't mean to click 'best answer'. Ah well! :-)

Re your clearfix. Yes I'm aware of this clearfix, and if you look at the code you'll see that it's exactly I did with the floats. But as I said before, I'm not keen on this solution because I can't find a way to make the right-hand column fill its parent, therefore looking crap when giving it a background colour.

I appreciate your help, but I ask in the nicest possible way: please try to answer my questions!

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

My apologies. The answer to your question is that floats do not support such manipulation (filling parent height) without hacky additions like fixed heights. This is why I recommended that you either use inline blocks or flexbox, as both possess the exact behavior you're looking for.

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

That's a great idea actually - I'll try to hack an inline-block solution and use that as a fallback from a flexbox setup :-)

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Would still be nice to have an answer to the first question :-)

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Thanks for all comments so far. I would still an answer to my original question, which was :

"I've added some crazy colours again to make things easier to see. Check on the bottom of the second column (gray). It overlaps the yellow div.

http://codepen.io/andrew_stelmach/pen/iHEpc

Why on earth is that?

And why on earth does it fix it when I set position:relative; for the yellow div (.back-to-top)?"

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

To be honest, I'm not sure why that is. :) I haven't worked much with absolute positioning, or any positioning method other than static, for that matter.