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
mrx3
8,742 PointsJust completed my first three column layout and I have a couple of questions. (Codepen link included)
In line 11 of my CSS I set the html height to 75% for the .floatLeft and .floatRight columns. The reason I did this is because I wanted those two columns to extend all the way to the bottom of the page. Both of those columns do not have enough content to extend all the way to the bottom. So, I added a height of 100% to the .floatLeft, .floatLeft, .wrapper, and body tags. Is it okay that I adjusted the height in the html tag? If I have the html tag set at 100% the background overflows into the footer section, and I did try to use overflow: hidden; for various tags but, it did not work. Any advice on the way I used the CSS that I used would be great also. Also you'll have to look at the page in full screen. For some reason the background for the columns gets cut in half. I plan on using media queries to make the site more responsive but, I don't know that much about using media queries.
Codepen: http://codepen.io/mike316/pen/WbXEdz
Thank you in advance for any feed back.
2 Answers
Ryan Duchene
Courses Plus Student 46,022 PointsI can see a couple issues you're having.
First, your html tag is set to have a height of 75%. This is what's causing the inconsistent display behavior in terms of height. Try resizing your browser vertically to see the effect. To fix, set it back to 100% or remove it altogether to regain a more consistent display across browsers of different sizes.
Now, something about floats. If you want to create a column layout, you always want to float all the columns left, even the middle and right ones. This might sound weird at first, but it will knock out most of the small bugs in the layout and will help you a lot on the road to a more fluid layout.
But the most important thing is, columns don't work well with floats at all. To see why, open this CodePen and keep reading on. (I used Sass, but you can get to the generated CSS by clicking the eye icon in the upper-right corner of the CSS window.)
This has to do with the way floats were originally implemented. They were never intended to be used for layout purposes; rather, they were to be used to allow text to flow around inset blocks of content, such as images and pullquotes. Floats will trim their height to match that of their content (as you can see in the pen, the bottoms of the columns are not flush with each other), and while it is possible to adjust this with the height property, it's not reliable. As a result, floats do not work well for a column layout.
There are two other techniques you could try. Flexbox is, well, flexbox. Anything is possible with it, except compatibility with Internet Explorer.
The other idea is one even I didn't consider at first: tables. Not the HTML table element, but CSS's display: table and display: table-cell. It's not quite as fluid as flexbox is (e.g., child elements can't wrap around), but it does the job well enough and works in older versions of IE.
I've forked and refactored your pen to use tables, as flexbox isn't supported in IE9 and below. In particular, I've added a wrapper around your three-column layout and renamed a couple classes. If you ever make it responsive, note that you may have to make all the columns display as block on mobile viewports.
Hope this helps!
Wayne Priestley
19,579 PointsHi Mr X,
If you remove height: 100%; from your float left and right the background colour will fill the aside.
mrx3
8,742 PointsThank you for the comment Wayne. I tried what you said in codepen and you're right it works. But, when I remove the height from the float left and right in my notepad+ , and preview it in a browser the columns resize shorter. Not sure why that's happening.
Wayne Priestley
19,579 PointsReally strange, I wouldn't know why that would happen either.
mrx3
8,742 Pointsmrx3
8,742 PointsThank you for the comment Ryan. I have been following along in a book I bought called, "CSS The Missing Manual." I'm on the chapter, Float based layouts. The author has us floating in different directions. I do agree with you though about floating left. Thank you again for your help.