Welcome to the Treehouse Community
Looking to learn something new?
Just 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.
Thank you in advance for any feed back.
I can see a couple issues you're having.
html tag is set to have a
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
block on mobile viewports.
Hope this helps!
Wayne Priestley19,567 Points
Hi Mr X,
If you remove
height: 100%; from your float left and right the background colour will fill the aside.