I have been using CSS for many years now, and I have always been a \'percentage\' kind of guy, as in I always define heights and widths using percentages as opposed to pixel
Reasons aplenty! Percentage widths are very useful when it comes to sizing elements relative to something else (browser size for instance). You can have your page dynamically change to fit different circumstances. Pixels on the other hand are useful when you need precision sizes that won't change on you. Some people (e.g. me) use both pixels and percents to position elements how you want them. Others (e.g. people other than me :P) will tell you this is stupid.
in inner style top property is in % so it will count as 200px*0.3=60px
#outer{
border-style: dotted;
position: relative;
height: 200px;
}
#inner{
border-style: double;
position: absolute;
top: 30%; <<<<<<<<<<<<<<
}
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>
Here top is 30px . so it will be as it is.
#outer{
border-style: dotted;
position: relative;
height: 200px;
}
#inner{
border-style: double;
position: absolute;
top: 30px; <<<<<<<<<<<<
}
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>
I use pixels on my website and I keep a maximum width of 1000px. My website displays properly on my 11" netbook, however does not do very well with mobile devices, but that is what this is for:
<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />
I find developing websites in percentages very time intensive, having to consider all re-sizing events, such as:
overflow:scroll;
Pixels and percentages both have their perks, but I would say that pixels would be a better choice because of precision, reliability, and is easier to develop. Also another thing to consider are pixels and percentages for fonts. Here is my rule of thumb:
If you have people that may need to enlarge the font it is always better to use percentages for the font.