SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)

    Get a div to watch something float

    Hello,

    http://www.aggis-topography.com/azureronin

    Basically, I have a <div> and then have floating <divs> inside. One of those floating <div>s I want to have a variable size, and I want the div that contains it to grow accordingly. However, since the div is floating, it won't.

    How can I correct this situation?

    Here is a quick view of the core pieces of this code:
    Code:
    <div id="main">
     <div id="header"></div>
     <div id="menu" class="float_left"></div>
     <div id="content_area" class="float_right">
      <div id="inner_content_area" class="float_left">
       <div id="content"></div>
       <div id="footer"></div>
      </div>
      <div id="ronin" class="float_right"></div>
    </div>
    Basically content is the one that grows and I want main to grow accordingly.

    The core of this question is basically "can I make something floating affect the size of it's parent"?

    I know I could redo my CSS to use positioning elements instead of making it float, which I may have to do.

    Thanks.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a bad idea - it means the overall size of your layout could change from page to page dependent on the contents and there'll be no consistency.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    That was meant to be the point. There would be a min-height set to allow to be the smallest, but then it would grown vertically in order to display more content.

    Is that considered a "bad design" now a days in favor of having just the content div scroll?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I think I misunderstood you. I thought you were talking about the width of the container changing based on the width of the float, but you're actually talking about your container not containing the floats. What you need to do is clear your floats.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Ah, thank you.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I still have a problem.

    If I use overflow: hidden, it just hacks off the extra (of course).
    If I use overflow: auto, it gives the main section a scroll bar (as expected). But I want the scrollbar to be the typical scrollbar, not one in the middle of the page.

    As for display: table and display: table-cell, they seem to have no effect, except for expanding it about 10 pixels.

    It is most obvious on this page: http://www.aggis-topography.com/azureronin/p/products

    Am I missing something?

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I solved my problem. The problem was I was under a minor misconception. I knew that non-floating parents wouldn't wrap floating children, but it seems that floating parents also won't wrap non-floating children. I need to add "display:table" to both main and inner_content_area.

    Thanks.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. It's because you set a height on #inner_content_area when you really wanted a min-height. Adding display:table had the same affect.

    I recommend that you read these:
    Internet Explorer and the Expanding Box Problem
    Min-Height for IE/Win
    The overflow declaration

    Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach is best for containing floated elements. The page Tyssen linked to demonstrated it, but left out the part needed for IE5.0/Win.

    Here's the complete version:
    Code:
    .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      visibility:hidden;
    }
    .clearfix {display: inline-block;}
    
    /* Hide from IE5/Mac \*/
    * html .clearfix {height: 1px;}
    .clearfix {display:block;}
    /* End hide */
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also wouldn't recommend using display: table as a float containment technique because I've seen it cause other unwanted problems in Firefox.

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, if I remember correctly, it can cause problems in at least some versions of Safari sometimes too.

    P.S. Hello Tyssen.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.

    Although, after going through all this it looks like we'll be switching back to our original plan to go with a content box that keeps it's size and just have overflow scroll within it.


Bookmarks

Posting Permissions

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