Whats wrong with my CSS nesting

Question

Basically i am working on something and up until today everything was fine but im working with others and last night files were edited so when i updated my subversion things had gone a bit pear shaped! Basically i need to figure out whats happened to my nested divs, which are no longer nested and i've spent all day trying to fix it with no joy so hopefully someone can please tell me whats going on!

<div id="navbar">

    <!--<div id="notification-icon">

    </div><!--End of notification icon-->

    <!--<ul id="nav-icons">

            <li><a href="#" class="notifyMe"></a></li>

            <li><a href="ProfileFeed.php"><img src="images/home-icon.png" alt="Home" /></a></li>

            </ul><!--End of navigation icons-->

            <div id=searchBar><!--start of search bar div-->
                    <input type="text" name="inputString" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" placeholder="Search People"/>
                    <div class="suggestionBox" id="suggestionBox" >
                        <!-- <img src="images/upArrow.png" style="position:relative; top:-12px; left:30px;" align="left"/> -->
                        <div align="left" class="suggestionList" id="autoSuggestionsList"></div>
                    </div> <!--end of suggestionBox-->

            </div><!--end of search bar-->

            </div><!--End of navbar-->

        </div><!--end of topbar-->

    <div id="prof-wrapper">

    <div class="prof-content-main">





 <div id="left_col">

 </div><!--end of left-col-->


 <div id="right_col">

 </div><!--end of right-col-->

 </div><!--End of content-main-->

</div><!--End of Wrapper-->



<script type="text/javascript" src="js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
    <script type="text/javascript"> 
        $(function() {

            $( '#ri-grid' ).gridrotator( {
                rows    : 2,
                columns : 3,
                w1024           : {
                    rows    : 3,
                    columns : 3
                },
                w320    : {
                    rows    : 2,
                    columns : 3
                },
                w240    : {
                    rows    : 2,
                    columns : 3
                }
            } );

        });
    </script>

Im not too sure how to format my css to post it but Ive attached an extremely stripped down version of whats happening in this fiddle: http://jsfiddle.net/DannyW86/ZMScG/

You can see that for some reason my wrapper isn't wrapping around the two columns that ive made it just kind of sits on top and overlaps a bit! Really irritating me at this point!!

Answer 1

The problem is that the left_col and right_col divs are floated which stops the containing div from expanding to their height.

Either use an empty div after the floated elements with clear:both

<div style="clear: both;"></div>

Or the CSS clearfix solution which does not require any empty div and so is better formed markup.

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

With this solution you'd add the clearfix class to the containing/wrapping div.

Answer 2

It's just issue of floating, you can have 2 approaches, either add this in your HTML to clear floats

Demo

<div style="clear: both;"></div>

Or add overflow: hidden; in #prof-wrapper

Overflow Demo