Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Div tag doesn't expand the height!?

    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
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.

  • #3
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Alright. Thanks. I've never used "overflow: hidden" for anything like this so i just thought it was a little bit weird.

    Thanks again
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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?

  • #5
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Good question, i don't know the answer to it tho
    Last edited by najkiie; 04-24-2009 at 10:32 PM.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Yes yes, I'd say your intention is not very clear.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #9
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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?
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #10
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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!!!
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •