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 Stu Cowley
Stu Cowley
26,287 Points

Framework Basics Course Query

Hey guys,

Just wondering if anyone has done the Frame Work Basics course?

I'm curious if this course has references to a two columned layout that flows nicely together.

I'm trying to find a two column method that is universally friendly (IE and early browsers), I have done the CSS Layout Techniques course but there was only one example that utiliizes Flexbox, but it is not IE friendly.

Thanks

Stu :)

3 Answers

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Take a look at the Column Layout with Inline Block video. It is a pretty simple way to layout the columns without the headaches of floats. It also offers a great solution for equal height columns as well.

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Keith Kelly

Thanks for your suggestion, but I have already done this video and it wasn't what I was after. The layout design I'm looking for is pretty much the same as this site.

I want both the left and right columns height to be the equal, I've tried using Flexbox but good old IE won't display it correctly.

I might try and have a play around using Bootstrap and see what I can do.

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

The interesting thing about the example site is that their columns are not actually equal height even though they appear to be. They wrap the primary and sidebar content in a div (.page-bg) then apply a background image to that div that gives the appearance of a border between main content and the sidebar and a lighter shade of gray for the sidebar background color. Since the wrapper div clears the floats of the two columns it extends past the bottom of the columns and appears as if the two columns are of equal height. In reality the two columns are actually differing in heights.

I have played around a good bit with the Bootstrap framework and I don't recall any preset options to even out column heights. As far as I am aware the two best options are to use flexbox (obviously causes issues with IE) or apply 100% heights to your columns and all of their parents.

Hopefully this helps!