dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: "Float: left" disables outer div auto-height

  1. #1
    Join Date
    Jun 2009
    Posts
    20

    "Float: left" disables outer div auto-height

    Check at the code below. The outer div has a red background but this is not shown because I use "float: left" on the inner divs. So if "float: left" is used it manage to disable the auto-height in the outer div. If the "float: left" property is removed from both inner divs the auto-height on the outer div works and the background is red.

    Why is that? It's really annoying since I have to set a fix height manually on the outer div to get the background color to the height I want.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <div style="background: Red;">
    <div style="height: 100px; background: Green; float: left;">fsdfsdf</div>
    <div style="float: left">fsdfdsfsdf</div>
    </div>
    
    </body>
    </html>
    Thanks for help!

  2. #2
    Code:
    <div style="background: Red; position: relative;">
    <div style="height: 100px; background: Green; left:0; width: whatever; position: absolute;">fsdfsdf</div>
    <div style="left: +whatever; position: absolute;">fsdfdsfsdf</div>
    </div>

  3. #3
    Join Date
    Jun 2009
    Posts
    20
    Thanks, that worked. Approx at least :-)

    By coincidence I swapped place between the absolute and relative positions and that solved the problem.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    The above CSS isn't needed, just apply:

    Code:
    overflow: hidden; /* for standards compliant browsers */
    width: 100&#37;; /* for IE */
    to the outer container and it will automatically clear the float.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Jun 2009
    Posts
    20
    Thanks, that worked fine!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles