Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Lauren Jones
Lauren Jones
1,991 Points

CSS Zen Garden

Has anyone looked at the CSS Zen Garden site? And if so, have you thought about working on a project to submit?

I decided I would work on one to practice what I've been learning, and I'm finding it a real challenge. Putting things into use really shows what needs reviewed.

If anyone is working on this too, let's share tips and help each other :)

4 Answers

What specifically are you having trouble putting together? Am not exactly working on anything right now but i have a bit of experience.

Lauren Jones
Lauren Jones
1,991 Points

Right this second everything is working out okay, I've just found it to be a challenge in general. Not being allowed to change the html has proven to be frustrating, and I found myself spending a lot of time tweaking things to get the result I wanted.

It took about a half hour just to get the sidebar to actually display next to the other divs, rather than under them for some reason.

I'm having fun playing around, though.

Great that's good, that's the fun of learning is solving your problems. Once you figure it out you'll never forget how to do it. Good luck in your future endeavors!

Lauren Jones
Lauren Jones
1,991 Points

Well, now I could actually use some help. Here's what I have right now. The basic layout result is what I want, but it only displays properly on certain screens, and I know there's a better way, I just don't know what it is.

Without spoon-feeding me, could somebody point me in the right direction? The sidebar is pretty good where it is, but I'd like the other divs evenly (and reliably) spaced and the footer right below everything else.

Would just using em instead of px do the trick? Or should I be going at the positioning entirely differently?

There are several things you can try to solve your problem. You can try adding some bottom margin the the divs. You can also create a class and add that class to each div then style that class in your css and each one of your divs with that class will have the same style applied to it. As far as the footer try clear both property to push it down the bottom. Those should point you in the right direction.

Lauren Jones
Lauren Jones
1,991 Points

CSS Zen Garden doesn't allow changing the html, but I'll try the other things and see how far I can get. Thanks!

Lauren Jones
Lauren Jones
1,991 Points

Okay, so I've rewatched the box model and positioning videos, and I know there has to be something I'm missing, but I just can't get this to work. Here is the current version, which looks okay in Safari, but not in Firefox. If I give the divs position: absolute; then the sidebar will display beside them like I want in Firefox, but the divs all stack (in both Safari and Firefox). The only way to then unstack them is to manually position them n pixels from the top, which doesn't display properly across various screen sizes.

I'm sure there's some simple reason these boxes won't go where I want but I just can't seem to get it. I've tried every combination of position: display: and float: that I can think of and each one has some issue.

Help anyone?