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

Fredrik Johansson
seal-mask
.a{fill-rule:evenodd;}techdegree
Fredrik Johansson
Full Stack JavaScript Techdegree Student 12,390 Points
Posted by Fredrik Johansson
.a{fill-rule:evenodd;}techdegree
Fredrik Johansson
Full Stack JavaScript Techdegree Student 12,390 Points

What's the reason the column appears outside the container?

I have created three fluid columns inside a section. This section has a background-color and a padding. When I put the columns with a specific width ( calculated by calc ), and give all of them the "float: left" property, everyone appears outside the section. Meanwhile if I don't use float: left, everyone does stack (in their own row of course) after each other but inside the section.

Here's when im using the "float: left" property: https://imgur.com/a/K1fCqsg

Here's without it: https://imgur.com/a/MZyrhpd

1 Answer

deebird
deebird
7,558 Points

Floating elements removes them for the document flow and if floated elements have non-floated parent elements, the parent will collapse. So you need to clear your floats or also float the container or assign the container a height.

Fredrik Johansson
seal-mask
.a{fill-rule:evenodd;}techdegree
Fredrik Johansson
Full Stack JavaScript Techdegree Student 12,390 Points
Fredrik Johansson
.a{fill-rule:evenodd;}techdegree
Fredrik Johansson
Full Stack JavaScript Techdegree Student 12,390 Points

Oh okay I see. Guess I'll need to bump into the float lesson. But if I understand you correctly. Let's say i "float:left" the section that contains all of these divs. I did see that it worked fine. Is that the "valid way" to fix the problem? Or could it come any problems out of it?

Edit: Maybe use this trick to remove the floats from the childrens.

.calc:after { content: ""; display: table; clear: both; }