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

What is the best layout technique ?

I have done the responsive layout course and the lesson on creating a grid but it didn't work, im not sure why maybe its something to do with brackets, i copied the project notes just to check. What is the best layout technique to use, it seems even with a grid it only lets you set the width, do you have to use floats and margins to get the position, i know there are frameworks like bootstrap that are easier but i would like to know how to create a good layout from scratch just feels like jumping between methods and mixing them (Hope that makes sense) ?

3 Answers

Maor Tzabari
Maor Tzabari
1,762 Points

That make sense, that way you will understand the code and not just write it without knowing what it's doing. Creating a layout, which I'm sure we're talking about responsive layout, is all about the width with percentages and float. Once you are really familiar with that behavior of code you can create a simply responsive page without even using bootstrap.

For example, you want to have a page with left side that has 70% of the page and right side with the rest - 30%; You will do something like that:

HTML:

<div class="left-side">Left Side Here</div>
<div class="right-side">Right Side Here</div>

CSS:

.left-side { float:left; width:70%; }
 .right-side { float:left; width:30%; }

That way you create a responsive layout, that's it doesn't matter what device are you using, as long as you didn't set the width with pixels it will do the job You can also change the float:left to right and see how it behaves and you can also read more about the max-width to know how to center the content with like a container

That's my tip for you ; )

Thanks, i understand the percentages part but setting the position is the bit i dont .

Maor Tzabari
Maor Tzabari
1,762 Points

Yes, you right, the position can be complicated sometimes, it's all depended on what you need. If you'll give me an example of code that you couldn't figure out how to manage, I will try to help

Thanks