The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Aligning container div to floating divs
EugeneG
post May 2 2012, 09:40 AM
Post #1





Group: Members
Posts: 2
Joined: 2-May 12
Member No.: 17,026



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 2)
pandy
post May 2 2012, 10:49 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,549
Joined: 9-August 06
Member No.: 6



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



--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
EugeneG
post May 2 2012, 11:21 AM
Post #3





Group: Members
Posts: 2
Joined: 2-May 12
Member No.: 17,026



So simple once you know how.
overflow: auto; (option 1) did it for me.
Many thanks Pandy.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st October 2014 - 04:35 PM