Question

I’m trying to learn a little CSS and am about to give up at positioning and sizing the elements.

Why does

#name {

height: 25% ;
}

cause the div to keep the size that is needed by it’s content (like, if there is only one line of text, the div will be just one line in height).

But as soon as i add position: relative ; it will be 25% high?

That seems to mean that i have to add the position attribute everytime i want an element to change it’s size, even if i don’t want to take it’s position out of the static flow.

Also i do not understand which unit i should pick for my sizing. em, px, percentage…it’s kinda overkill. I thought it will be useful to use % everytime in order to keep the layout “dynamic” or “responsive”, is this false?

One last thing: Why do most designers use the class-attribute instead of id, which is nearly unused as far as i see

Answer 1

Different elements have different default display values applied to them for example: a div has a default display of block whereas span elements use inline, you are probably trying to adjust the height of an inline element.

As for measurements, they all have their place however I usually try and stick to em as then the sizes will adjust with the font size. Percentages are useful in certain situations as are px. However as far as responsive design is concerned you should be primarily using media queries (although using percentage measurements can also aid on this front).

To answer your final question, ids can only be used once in the html and thus can only apply to one element, classes can be used multiple times for many elements so it only makes sense that there are going to be more declarations of them in the html.