how to make a div to wrap two float divs inside?


Tags: css,layout,html,css-float

Problem :

I don't know if it's a common problem, but I can't find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>


Solution :

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

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

It should force the container to be the correct height.


    CSS Howto..

    How to vertically align div text?

    How to change header and footer to full width

    How to design multiple time clock wise rotation of a image in css

    How to selectively load/use CSS for YUI modules?

    How do I get the element after my horizontal css navigation bar to appear below it?

    how to write .html with .css to custom color text

    How to use Javascript to close css drop down menu on outside click?

    How to override default CSS file location in a Qml Webview?

    How to Convert RGB to HEX ( for Gradients )

    css how can i center multiple elements with absolute position

    How do I overwrite certain conditions when you have two CSS files?

    How do I lock a sidebar to the height of a window even when a user scrolls?

    How do you apply diferent colors from diferent css rules to the same object?

    How to highlight syntax inside
    tag?

    Jquery slideshow - time on initial image

    how to load the dynamically changed css file

    How to rotate multiple words with CSS?

    How can I differentiate Safari and Chrome in CSS?

    Navigation bar - How to keep the page highlighted when selected?

    How to display text on the same line?

    How to manage multi tenant web portal css using Asp.Net MVC

    How to call CSS from JavaScript

    CSS HTML how to ignore some css for non ie7 or ie8

    How to apply gradient to element with correctly display in IE9?

    How to make IE respect max AND min-width [duplicate]

    CSS: How to shorter code having select direct children with multiple id

    How to change dropdown submenu second level background?​

    How to change the hover pseudo class of an element using jquery

    customize bootstrap widths do not know how

    using css modules in react how can I pass a className as a prop to a component