How to prevent wrapper collapse when using floating objects.

I want to personally thank Chris from CSS-Tricks for the info on preventing wrapper collapse when using float objects. I was recently watching his amazing video series on creating WordPress themes and he talked briefly on this issue. I had a “that’s how you do that” moment. As the name of the post implies there is an “issue” when you use a “wrapper” around floated objects. The wrapper object becomes as wide as the floats but collapses to 0px high. This typically is only an issue if you are using a background image for the “wrapper” because the wrapper doesn’t exist because it is 0px high.

There is a sly way around this and some people might call this a hack. The way you prevent the wrapper collapse is by adding some elements to your CSS style sheet.

For the people that just want the answer here it is… In the “main_wrap” CSS properties you must add the “overflow: hidden;” tag. By doing this it would make the main_wrap object box the same height as the float objects that are inside of it.

Here’s an example for the HTML of the website using what you just learned.:

The HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST Document</title>

    <!-- CSS Includeds -->
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <!-- JavaScript Includes -->
</head>
<body>
<div id="page_wrap">
        <div id="header">
            <h1>Page Header</h1>
        </div><!-- End of Header-->
        <div id="main_content">
            <h1>Main Header</h1>
        </div>    

    <div id="sidebar">
        <h1>Sidebar Header</h1>
    </div><!-- End of right_wrapper -->

    <div id="footer">
    <h1>Footer Header</h1>
    </div><!-- End of Footer -->
</div> <!-- End of main_wrapper -->

</body>
</html>

The CSS

This is the code for the CSS. Please note the “page_wrap” properties:

/*
    Test CSS Page
    By: Jared Heinrichs

http://jaredheinrichs.com

*/

/* Main Items ****************************************/
*            { margin: 0; padding: 0; }
body            { font: 14px Georgia, serif; background: #FFF }
#page_wrap        { width: 1000px; margin: 0 auto;  overflow: hidden;
                    background-image: url(../images/mainWrapperBackground.jpg); }

/* Left Wrap ****************************************/
#left_wrap        { float: left; width: 600px; }

    /* Header ***************************************/
    #header        { float: left; width: 600px; }

    /* Main Content *********************************/
    #main_content    { float: left; width: 600px; }

/* Sidebar ******************************************/
#sidebar            { float: right; width: 400px; }

/* Footer *******************************************/
#footer            { float: left; width: 1000px; }

The secret to prevent main_wrap from collapsing is by using “overflow: hidden;” tag.