PDA

View Full Version : Div tag doesn't expand the height!?



najkiie
Apr 24th, 2009, 11:02 PM
The title sounds strange, i know. What i mean is that the height only is about 10px high even tho there is elements inside the div tag that is much higher. I haven't set any height to the div tag exept "height: auto", but that doesn't really do anything, does it? Basically: the div height isn't "expanding".

Have a look for yourself on this test page:
http://planettechsupport.com/new-blue/

And here is an image of the layout..:
http://blubbz.com/host/images/example.gif

If i add "overflow: hidden" to the #content div it works, but that's definately not the right way to solve this, right? The "overflow: hidden" tag is usually used to hide content that's longer than the div (or whatever tag you're using) tag.

Is there any other way to solve this or do i have to use "overflow: hidden"?


Thanks.
-Nike

jcdevelopment
Apr 24th, 2009, 11:07 PM
no, overflow : hidden is the right way. Use that and it will expand in FF. IE just expands as long as there is no height set.

najkiie
Apr 24th, 2009, 11:09 PM
Alright. Thanks. I've never used "overflow: hidden" for anything like this so i just thought it was a little bit weird.

Thanks again :D

jcdevelopment
Apr 24th, 2009, 11:17 PM
Actually, i would like to know why this works. I have been using this for a while and never really understood it.

Does it mean that a div cant overflow, so there fore the div expands with content?

najkiie
Apr 24th, 2009, 11:27 PM
Good question, i don't know the answer to it tho :(

Rowsdower!
Apr 24th, 2009, 11:50 PM
I haven't looked at the code, but are we talking about a container that has floated elements in it? If so, that's why. I don't know "WHY WHY," but just that floats will do that...

abduraooft
Apr 25th, 2009, 10:33 AM
Yes yes, I'd say your intention is not very clear.

drhowarddrfine
Apr 25th, 2009, 12:54 PM
Parent elements are never to expand to contain floated elements. IE does this but it's a bug in IE. Firefox, and all the other browsers, perform correctly.

The floated element is removed from the normal flow of things and is allowed to overflow the containing element. By adding 'overflow:auto' to the parent, you are telling it to automatically expand itself to contain all elements that would normally overflow the box.

If you added 'overflow:hidden', the box would hide the part of the floated element that overflows the box.

najkiie
Apr 25th, 2009, 12:56 PM
Parent elements are never to expand to contain floated elements. IE does this but it's a bug in IE. Firefox, and all the other browsers, perform correctly.

The floated element is removed from the normal flow of things and is allowed to overflow the containing element. By adding 'overflow:auto' to the parent, you are telling it to automatically expand itself to contain all elements that would normally overflow the box.

If you added 'overflow:hidden', the box would hide the part of the floated element that overflows the box.


Yea that's right but if i use overflow: auto it will show scrollbars, wont it?

najkiie
Apr 25th, 2009, 12:57 PM
Yes yes, I'd say your intention is not very clear.

@Rowsdower!, Yeah i have one main container, and then another inner-container in there. And inside the inner-container i have three floating boxes.


@abduraooft, are you saying you don't understand what i mean? I'll show you another example. I use a firefox addon thats called firebug (it's basically a plugin that lets you edit the source code of a page directly in the browser), and if you hover over an element in the plugin it marks the element on the page with a light blue color...

Image: http://img530.imageshack.us/img530/3295/63679356.png

As you can see i'm hovering over the #content div, and the #content div is marked with a light blue color on the page. When i hover over it it looks like the height of the #content div only is about 10px high, but i have more images inside the #content div that is higher.

got it now?I don't know how else to explain it.. :P

Thanks for the help guys :P

abduraooft
Apr 25th, 2009, 01:10 PM
got it now?I don't know how else to explain it.. :P Yes, it's clear now. I was wondering why do you need to expand it, as there is no background or border applied to that content-inner and thus there won't be any visible difference when you keep it as such and after clearing the floats :)

Yea that's right but if i use overflow: auto it will show scrollbars, wont it?
No, at least in this case, see www.quirksmode.org/css/clearing.html

If you are worried, there are some other tricks too, see www.positioniseverything.net/easyclearing.html

najkiie
Apr 25th, 2009, 01:18 PM
I was wondering why do you need to expand it, as there is no background or border applied to that content-inner

I wanted to expand the #content div, because that div has a background. Expanding the .inner-content isn't really needed, i just thought it was weird that it didn't expand..

And btw, thnx for those links. Really good information!!!