HTMLHelp Forums > Aligning container div to floating divs

Full Version: Aligning container div to floating divs

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

EugeneG

May 2 2012, 09:40 AM

I am trying to get a div with a background colour and margin to contain two floating divs. Problem is that the container div's colour and margin does not extend to the bottom of the largest floating div.

CODE

<head>
<style type="text/css">
.container_div {
    width: 98%;
    padding: 0px 10px 10px 10px;
    margin-right: auto;
    margin-left: auto;
}
.main_div {
    width: 98%;
    padding: 10px;
    background-color: #FFFFCC;
    border: thin solid #800000;
    text-align: left;
    clear: both;
}
.leftcolumn {
    float: left;
    width: 49%;
}
.rightcolumn {
    float: right;
    width: 49%;
    border-left-width: thin;
    border-left-style: solid;
    padding-left: 1ex;
}
</style>
</head>

<body>

<div class="container_div">
    <div class="main_div">
        <div class="leftcolumn">
            gsdgdfhg sdfg sdfg fdgdfg gsdgs gsdgdfhg sdfg sdfg fdgdfg gsdgsgsdgdfhg
            gsdgsgsdgdfhg sdfg sdfg fdgdfg gsdgsgsdgdfhg sdfg sdfg fdgdfg gsdgsgsdgdfhg
            sdfg fdgdfg gsdgsgsdgdfhg sdfg sdfg fdgdfg gsdgsgsdgdfhg sdfg sdfg fdgdfg
            gsdgsgsdgdfhg sdfg sdfg fdgdfg gsdgs gsdgdfhg sdfg sdfg fdgdfg sdfg
            fdgdfg gsdgsgsdgdfhg sdfg sdfg fdgdfg gsdgs</div>
        <div class="rightcolumn">
            gsdgdfhg sdfg sdfg fdgdfg gsdgs gsdgdfhg sdfg sdfg fdgdfg gsdgsgsdgdfhg
            sdfg fdgdfg gsdgsgsdgdfhg sdfg sdfg fdgdfg gsdgs</div>
        after right col </div>
    after main </div>

</body>

</html>

pandy

May 2 2012, 10:49 AM

Sounds like you need to clear the floats.
http://css-discuss.incutio.com/wiki/Clearing_Space
Option 3 is well tried.

EugeneG

May 2 2012, 11:21 AM

So simple once you know how.
overflow: auto; (option 1) did it for me.
Many thanks Pandy.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.