The next problem is a well know headcracker. The good old netscape so called height bug is back, surprisingly this time in FireFox. Try to size a <div> to 100% height–it won’t do.
In most cases the 100% height is to set the height of body and html to be the height of the viewport. There are at least thousands of solutions available but almost none work a 100%.
Well there is at least one solutions that I know of:
Using ‘clear: both’
“The clear property sets on which sides of an element other floating elements are not allowed.”
which means actually that the element/div is moved below all floating boxes of earlier elements in the source document. So the solution would be to set a ‘clear div’ before every end tag of a main container.
So first of you need to setup the css:
.clear{ clear:both; } |
After saving the css put the class before the ‘container’ closing tag div
<div id="container"> some bit of code <div class="clear"> </div> </div> |
As stated before this will make sure that class clear will be moved below all floating boxes. Which makes the container expand till below the clear class. If you have several divs inside your container/wrapper, you need to make sure that every child div has the same “clear:both” attribute.
This can be done by replacing the css with the following: (thx to DavidM for the remark)
DIV.container> DIV { clear:both } |
Dont forget to change the ‘ id=”container” ‘ to ‘ class=”container” ‘. The css code I provided ensures that all child divs (divs that are enclosed in the container div) have the “clear:both” attribute.
If you do keep get getting problems afterwards, please state it in the comments or mail me. I shall then look at the code and try to help you out.
There is a similar problem with 100% for tags.
Is there?
Haven’t heard or had this problem of tags before.
But sure will check into that
Is that a bug? I mean, isn’t it the way it should be?
Also, instead of adding the clearing divs, you could add “overflow:auto” to your container.
I Tried the overflow:auto before, but doesn’t work most of time.
Well in the case of my website (to get the border all the way down) it didn’t work.
But yes, I heard on some forums it could.
But I’ll take my time to revise my article and maybe put several solutions. Cause as I’ve said before, there are several solutions.
Thanks though
Couldn’t you just do this( in CSS ):
DIV.fullheight > DIV { clear:both }
Then for any container with class fullheight its child DIV elements get the clear attribute.
Good point, will update the article on later date.
Thanks DavidM
Yeah, I hate to tell you this but this is not a bug at all. height does not come from or but from the parent; which sometimes needs its parent set, too. But I think I need to re-read your post to make sure I understand your problem.
Well sorry for the inconvenience, I updated the article.
Thanks to all for the remarks
We really liked the website .. Thank you.
Thanks, glad to hear.
There are alot more articles to come.
Have fun reading
Kind regards
Thank you for sharing. I came to this site to read how things really are