Aligning container div to floating divs |
Aligning container div to floating divs |
EugeneG |
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> |
pandy |
May 2 2012, 10:49 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
EugeneG |
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. |
Lo-Fi Version | Time is now: 24th April 2024 - 06:52 PM |