New Member - CSS height element question...

I am quite new to CSS despite years of trying to make my own website, know a bit about php

I just have a question about CSS styling, specifically the height element

Is it wrong to specify a height for a div tag? eg so that the page height stops going up and down?

There is nothing wrong with using the height element, that is what it is there for.

I was told it is best not to use the height element in college, I don't know if this is because it can conflict with things

Did they tell you why or when not to use it? Or were they just referring to using it for the body?

It really does depend if you do need to use it, if not then rely on the content with padding / margins to set the height of the page.

Vaguely, because in college we were (other students as well) designing some similar to a retail site that everything should fit???

Something like that

Not quite sure what they were supposed to mean by that but, for example, if you have a header on your page with a background image then you have to set the height of the header area to be as big as the background image in order for it all to display. That is unless the content you put in the header area will stretch the header vertically to show the whole background anyway, but even saying that it is wise to set the height to prevent layout problems due to external influences (change of font size by user for example).

Sounds to me like your college tutor didn't know much about what they were talking about I am afraid.

OK, thanks

Is applying height used as a replacement for margin or padding?

Is applying a height used to for a specific reason where margin and padding will not work?


example:
On the new wwwdotdevelopersheddotcom

There is a white stripe that runs across the page that contains the developer shed "shed". The white stripe is a div that has a height set to 278px and overflow set to visible. This allows the image of the shed to break out of the the white stripe container. Without a set height the shed would sit inside of it.

Declaring height is not mandatory for your example. You could use margin and padding.

Welcome to DevShed Forums, cssbonding.

First off, I should remind you that the correct term is "height property", not "height element".

I wouldn't say "conflict", but it is best to avoid setting a height on elements that contain text or have descendants that contain text, so that the elements can expand with the content. Remember that users can and (some) will adjust font-sizes to make pages easier to read for themselves. Flexibility is very important in good web design.


That's what "min-height" is for.


Sounds to me like you don't know much about what you're talking about. I'm glad that at least one person teaching this in a formal institution knows about that. From the general impression I've gotten, most such instructors don't seem to be aware of many best practices.


It would be better if the image was given a negative bottom margin instead. The "height" property is not the only way to force overflow. Absolute and relative positioning can also be used to that kind of thing.

I am not sure why you have to reply negatively to every reply I give on this forum and for your information I do know what I am talking about and have been developing using CSS for many years and am always reading up on developments in the language.

If I thought the OP wanted to set a min-height, I would have discussed that with them, but it has a completely different result on the div it is applied to than height which the OP did talk about (as you well know if you know what you are talking about)!

OK, I think the tutor was meaning the wrapper div. It was two years ago, so maybe I was thinking of something else

For the record, I'm not targeting you specifically. I just will typically respond to anything I feel is incorrect or misleading. In this case you made a sweeping general statement. I will very frequently disagree with those. CSS has a lot of grey areas, so many questions aren't just "yes" or "no".

Knowing the technical things and following widely recognized best practices aren't quite the same. Some sites seem to only focus on the former.


I was responding to something you said. I did not directly respond to cssbonding's question.

Mozilla, Netscape, and Opera browsers interpret these values as the exact measurements and don't allow a DIV's HEIGHT or WIDTH values to extend beyond what you specify. So if you set the HEIGHT and WIDTH properties for a DIV and then insert images or text that takes up more space, the display will be a jumbled mess.

Internet Explorer is much more forgiving. It considers HEIGHT and WIDTH values to be minimum values and expands the DIV to contain all the content you want - just like a table cell.