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

Kylah Ellison
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kylah Ellison
Front End Web Development Techdegree Graduate 17,588 Points
Posted by Kylah Ellison
.a{fill-rule:evenodd;}techdegree seal-36
Kylah Ellison
Front End Web Development Techdegree Graduate 17,588 Points

How to decide on which CSS layout method to use?

Hi there -

I've finished quite a few courses in HTML and CSS here on Treehouse and I'm to the point where I want to start practicing with some basic sites on the side. I've drawn out a few wireframes for simple practice, and I've also got an idea of what I'd eventually like my portfolio site to look like as well.

The problem I keep running into now is: how do I know where to start? And by this I mean, how do I know which CSS layout method will best serve each of my ideas? How do I decide between using floats, flexbox, block, inline, or in-line block, absolute, relative, and fixed positions, etc.?

Can someone please explain their thought process when starting a new site and let me know how they come to a decision regarding what technique to use? I keep finding myself stuck at the start of each project, unsure which option would be best. The one thing I do know is I definitely want each of these sites to be responsive/fluid. And I really like the idea of flexbox, but I doubt that should be my go-to for every site. :)

Thank you!

2 Answers

Evan Allgood
Evan Allgood
3,876 Points
Evan Allgood
Evan Allgood
3,876 Points

This decision ultimately comes down to what you want your site to look like. However, as you've pointed out, there are several ways to approach styling. As such, there are many solutions. One way is trial and error - just messing around with CSS and trying different things will help address some of these concerns. An unfortunate drawback to this approach is that it is probably the most time consuming. Another way is to find websites that have a style you enjoy and may want to emulate. Using your browsers developer tools, you can see what methods (floats vs. flexbox vs. block etc..) are commonly used for sites that are most pleasing to you. Another route would be to look into using bootstrap. From what I understand, its free to use the components and can streamline the design process.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

if you want your site to be responsive use media queries.

Plus the 

.col {
width: 30%;
}

You can also use foundation or bootstrap frameworks. Read the unminified version to see how things are done. I built sites with both.

Just get your hands dirty and start coding.