Since i want to develop responsive websites i usually neglect px and use % for dimensions. But i discovered that some cases % doesnt work so i use em instead.
Why is it that in some cases % doesnt work but em does ?
Thx for help

Recommended Answers

All 2 Replies

In responsive websites normally we would use % for layout dimensions and em (or even rem units depending on your targeted browsers) for the fontsizes. em or rem is handy bacause it's easy to scale down or bump up fontsizes in elements relative to their parent(s). It's also recommended to set your media querries in em's instead of px.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

One of the best things to use in responsive web design is putting the following in your CSS reset.

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

This will override the default CSS box-modal (box-sizing: content-box) in the browsers, so that borders and paddings are calculated inside all elements instead of outside. This was for me really a life saver in RWD.

If you had 3 elements in a row equally set to 33.3333333333% width and you wanted a 1px border around them, then this would force the 3rd element to drop to the next line, but with box-sizing: border-box; you don't have this problem and will save you a lot of math and trouble.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.