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
joehorton
3,303 PointsI used floats and got the same result. Bad method?
Hi for this challenge I used the floats which took less time and seemed the easiest way to get the two in columns side by side. Here it is? Is this a bad css method with flaws or is it okay?
.primary { width: 45%; float: left; }
.secondary { width: 45%; float: right; }
Cheers, Joe
5 Answers
Garrett Levine
20,305 PointsNo, it is not bad to use floats. The point of the video was to use columns, but honestly right now support for columns is a bit scattered. I have never used CSS columns, because they don't maintain control over the text inside them the same way that floats do!
As you continue to learn more about CSS layout, there will always be multiple ways to solve any problem for layout. Floats are always the 'safest' way, since they are supported across all browsers (except ie 6, I believe, which... who cares?). Flexbox and the newer technologies are really exciting, but not as reliable and can sometimes have different behavior in different browsers!
Boyan Nakov
5,286 PointsTo reduce even more the code you have written, try targeting both .primary and .secondary by using the .col class that they share.
Since we have the box-sizing: border-box applied to all of the elements on the page, we can simply give .col a width of 50%. and some padding. I also think that from UX point of view, using only float: left would make reading the content much easier, and it also looks better.
The code would be something like this:
.col { width: 50%; float: left; padding-right: 20px; }
I also noticed that in reduced height of the viewport of the browser, the content of the .primary and .secondary overlaps the footer, so I added some clear: both to the .main-footer, to prevent this event from happening.
Anthony Rice
7,976 PointsWhen I use this code, the text from .primary column continues onto the .footer when the screen width is ~800px. To address this, I added the following code:
.main-footer { clear: both; }
Kornel L
4,368 PointsI used float and padding too.
.col { display: inline-block; width: 50%; float: left; padding: 0 25px;
}
joehorton
3,303 PointsThank you. Layout is my weakest skill in CSS. I'll keep that in mind for future projects..
Joe
pastry assassin
Full Stack JavaScript Techdegree Student 11,693 PointsThat's funny because I did the exact same thing and wondered if it was the correct way to do it.
joehorton
3,303 PointsOh okay, so placing each column float:left, they will go side by side ( one left and one right ) even though you are telling two columns to be positioned left?
Joe
Graeme Oxley
8,931 PointsFloat simply allows you to tell an element which direction to "stack" against. So the first column goes left, and goes against the left "wall". The second column also goes left, but this time it stacks against the right side of the first column. If there was a third column, and there was enough space provided, then the third column would stack against the right side of the second column. And so.
An important concept to understand as well is that if the third column DID NOT have enough space on that row (the first and second columns are set to 50% width, for example), then the third column would automatically drop down to the next row (or the next available left edge that has the width necessary for the column to sit).
If you set one column to the left and one column to the right, then you also create the possibility of there being a gap between the two (if you use fixed widths and not percentages). Also floating elements to the right can cause those elements to behave oddly when it comes to the normal flow. Say, for example, you have three columns set to width:33%; each. The first and third columns are set to float left, and the second one is set to float right. The end result when looking at the page will be column 1, then column 3, and finally column 2 on the right side. If they were all left, then it would be 1, 2, 3 - as expected.