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

Posted by Kristina Nelson
Kristina Nelson
4,196 Points

stuck - 3 column fluid layout

Hi. I've been trying to design a 3 column fluid layout. Maybe it is easy to do - but I'm stuck.

So far I have two columns lined up all right. But the third column stays at the bottom of my page. I've tried to float it left and it just shifts over where it is - at the bottom of the page under the other two columns. Here is my css.

The wrapper around my 3 sections is caled ".shell"

Thanks for any input. Kristina

css

.shell {
    position: relative;
    padding-top: 3%;
    margin: 0 auto;
    width: 100%;
}

.section3 {
    position: absolute;
    width: 20%;
}

.section4 {
    margin: 0 auto;
    padding-left:6%;
    width: 60%;
    font-size: 1.2em;
    line-height: 1.7rem;

}

.section45 {
    position: absolute;
    width: 20%;
}

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I'm a visual guy, so I made a cheap and fast one.

Start by looking at my code and ask questions.

http://codepen.io/kevink/pen/wpcdC

Kristina Nelson
Kristina Nelson
4,196 Points

Hurrah. You got me unstuck. The code was very helpful.

THANK YOU!

Kristina

Kristina Nelson
Kristina Nelson
4,196 Points

I was having another look at the css code you sent. And I started testing what would happen when I deleted bits of the code to see what each part did.

.clearfix { content: ""; display: table; clear: both; }

I was scratching my head wondering what the content'''' part did. And the clear: both. They didn't seem to affect the appearance of the 3 columns when I deleted them.

For what purpose are they included in the code?

Thanks again,

Kristina

Kevin Korte
Kevin Korte
28,149 Points

You caught a small error on my part, that I have thus fixed. It should have said .clearfix:after;, to be a little bit more consistent.

Let me say, we are climbing down a deep rabbit hole, and I'm trying to do my best to be clear and simple, but I'm not a teacher, so if I go overboard and confuse you, let me know and I'll do my best to try to explain.

Clearfix is basically a well known hack, since when an element contains only floated children, such as this layout, the element will collapse on itself. The clearfix forces the parent element to contain it's children, which is why I threw a light grey border in there, so you can see if it's containing the children elements (div one, two, and three) or if it is collapsed.

Using the :after psuedo class you have to have at least content: ''; or nothing will happen. Basically we are adding empty content, after our clearfix, and clearing the floats to help "reset" our floated layout.

Where did I get the clearfix code? Here: http://css-tricks.com/snippets/css/clear-fix/

At the bottom is the most latest iteration. You can see even this hack has changed a lot.

To understand how clear:both; interacts with floated elements, you'll want to read a lot about floats. Here is another decent article: http://css-tricks.com/all-about-floats/

In the context of the container, the clear:both; wasn't doing anything. When you get into much more complex floated layouts, the clearfix will help ensure floated elements inside of floated elements float properly.

I created a second layout, with containers, within containers, and clearfixes within clearfixes. It turned into a monster, I'm sorry. But now, remove the clear:both; from the clearfix class and watch the container around the two column floated text, it will collapse.

Also take not I had to put a clear:both; on the footer div to get it to sit below the two floated elements (the body and the sidebar). Remove that clear from the CSS and watch where the footer goes.

Just take a look at it and let me know. Hopefully you can read through the code enough, with those articles to understand.

http://codepen.io/kevink/pen/wpcdC

Kristina Nelson
Kristina Nelson
4,196 Points

Oh all right. Thanks!

(I was pleasantly surprised to find out from your previous code that I could use display:table, set the widths and not bother with a difficult grid. At least, the code I input seemed to work nicely.)

I'll take a look at that info.

Thanks again,

Kristina