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 Patrick Sturgill
Patrick Sturgill
3,825 Points

Playing around with multi-column

After taking the columns section, I was challenging myself to do a magazine style layout. So I opened a page of a magazine nearby, and i'm trying to "recreate" the style. Well, I am having with one part. There is a yellow box of text in the second column, and it is on the top of the column (in other words, the text from the previous column continues below it.) Is there anyway to make the div stay on the top of the corresponding column, and have the text wrap below it?

Additionally, I can't seem to get my wrapper to work now? If I add a width and have the columns centered on the page, the flexibility of the columns stops working.

Also, do you think multiple columns is really worth it? I could see it being very good in print sheets though.

here's a link to a codepen with the code I'm currently using (btw it's webkit atm): http://cdpn.io/jkDzh

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

It looks like you you forgot to close some tags and your formatting makes it hard to read. Run your HTML & CSS through dirtymarkup.com.

I'm not 100% sure what issues you are seeing, it looks fine to me, after I cleaned up the markup.

Can you provide a link/screenshot of what you want it to look like?

Patrick Sturgill
Patrick Sturgill
3,825 Points
Patrick Sturgill
Patrick Sturgill
3,825 Points

Thanks for that dirtymarkup link, that's pretty amazingly useful. Most of that was probably just from my cut and paste into codepen.io from notepad++. Used dirtymarkup but it still looks pretty bad in half screen mode. The dirtymarkup page is a good example for me while I'm learning the best way to arrange my markup.

This is a picture of the page I was using for reference: http://www.patricksturgill.com/lab/IMG_20130414_205517-(1).jpg

A recap of my 2 questions: 1) I'm trying to make that yellow aside move up, if possible, to the top of that column so that the rest of the previous question's text will be below the div. If I could do that, then I'm sure a media query could be used to keep it from automatically coming to the top when the columns are small enough to just be one column.

2) When I turn on the wrapper, it no longer keeps its flexibility. What do I need to do to fix that? Can I not put columns in fixed width divs?