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


Floated element with assigned width

Hi folks,

I am currently working on a template which has two columns layout, with aside floated right and article floated left, in addition to which each of these two elements has a specific width, see link below:


The problem is that I need aside to be say 35% and the article to be 65%, but somehow, if I put these settings, the article's content will start flowing underneath the aside, for some unknown reason. In addition to this, the background colour in the aside element does not cover the whole content area, again, for some unknown reason.

Any help would be appreciated.

3 Answers

28,736 Points

In fact the problem comes from the fact you added a padding of 2em to the aside html tag (line 259). So, put the percentage you need, as exemple 30% for the left column and 70% for the right column.

At this stage, the one that should be on the right will be underneath, why ? Because the 2em padding applied on the aside tag is added to the total percentage, so that's a value over 100%.

A way among another to fix it is to play with the box-sizing property using the universal selector. (you need to prefix it for Firefox).

            box-sizing: border-box;

At this stage, both are well aligned, but you have a gap between the left div at the top and the header.

The way I solved this is using positionning, not sure that's the best way to solve it, you should have a confirmation.

But basically what I've done is just adding a position: absolute to the aside tag, with top:-5px, and I added as well a relative position to the section tag, which is the parent, this way that's that tag which is taken as reference. As It's the first positionned parent.

aside {
    float: left;
    width: 30%;
    background: rgb(191,231,240);
    padding: 2em;
    position: absolute;
    top: -4px;

    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;

Hope it helps a bit, but you should ask confirmation from more experienced people about the way to fix the gap between the left column and the header, moreover, there is a new css technic layout classroom, that should probably help you to fix that kind of issues.

Thanks a lot, Geoffrey, however your suggestion seem to be creative some more problems, Guil Hernandez would be the best person to advice on this I think, right now I don't have time to go through the CSS layouts tutorials, I could really do with some quick advice if possible Guil please.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Daniele Manca,

Looks like a box model issue to me. As Geoffrey mentioned, the following should take care of it:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

I just tried it in Dev Tools, and it fixed it. :)

Amazing, thanks for confirming Guil, :)

well the aside can't cover the whole content area. it is defined within the scope of 35%. and that's how far it spans.

about the article pushed underneath the side. i would have guessed it's a clearing issue. but putting clear: left and right for a quick try out in the dev tools hasn't fixed the issue. dont have time right now to investigate further. i might later tonight. but hope the first part helps at least for the moment. best regards r.