SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting site container to fit content

    This has got to be an old question, but I must be asking it wrong because I've searched and can't find an answer.

    I want the site "container" or "wrapper" to expand and contract to fit the height of the content. In other words, if you have a site with multiple pages, some pages might just be a few inches high while others could be very long. I want the container to adjust to fit the contents.

    When I searched I found some suggestions to make the container height 100%, but while this did expand the container, it would resize with the browser window leaving the content "un-contained."

    So how do you achieve this and is there a method that works in most browsers?

    Thanks,
    Laura

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi Laura. It sounds like a simple issue. If you have a container and floated content inside it, the container won't wrap around the content. Rather, the content will hang out of it—unless you force the container to wrap around it. The easiest way to do that is with overflow: hidden on the container. E.g.

    #container {overflow: hidden;}

    If that doesn't help, then show us an example of what you are describing. The situation you describe is vary basic for websites.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Laura. It sounds like a simple issue. If you have a container and floated content inside it, the container won't wrap around the content. Rather, the content will hang out of it—unless you force the container to wrap around it. The easiest way to do that is with overflow: hidden on the container. E.g.

    #container {overflow: hidden;}

    If that doesn't help, then show us an example of what you are describing. The situation you describe is vary basic for websites.
    Thanks very much. This didn't actually work in this particular case, but your suggestion helped me find another solution--putting an empty <br class="clearboth"/> after the last floating element. Seems to work!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    That's certainly another way to do it, though not the favored one (since it adds unnecessary markup to the HTML). Another common tactic is to use the "clearfix" method.

    E.g.

    Code:
    #content:after {
        content:" "; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    or the more generic version (you just add the .cleardif class to any element that needs clearing):

    Code:
    .clearfix:after {
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    	}
    .clearfix { display: inline-block; }
    
    /* start commented backslash hack \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* stop commented backslash hack */


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
  •