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

HTML

Posted by Hippocrates Lychros
Hippocrates Lychros
6,258 Points

Setting divs height in %

I have so far created a static web layout using html/css and now I'm at the process of converting it to a responsive layout. Because I have some divs with height declared in absolute px values I would like to know which the best practice is for converting them into percentages. I've read some articles where it is suggested to change the body and html tags height into 100% , but doesn't seem to do the trick.

Thank you

3 Answers

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

In general, you should set your container div to a fixed width in pixels using media queries. If you need a refresher on media queries check out the Build a Responsive Website course.

We can be of more help if you create a codepen so we can better see the larger picture as it were.

Hippocrates Lychros
Hippocrates Lychros
6,258 Points
Hippocrates Lychros
Hippocrates Lychros
6,258 Points

Hello James

I guess what you suggest is to set a specific height which through media queries will vary according to the resolution applied. Here is more or less the layout [http://cdpn.io/pKmEt].

Thank you

Blair Rorani
Blair Rorani
6,658 Points
Blair Rorani
Blair Rorani
6,658 Points

And, how does this apply to top/bottom margins/padding? It seems wrong to use the width as the context for these calculations.