0

below is a simple script. Here is a megacontainer that needs to contain all the divs. It is doing it if we go as per below script. But the problem comes when i add float parameter to leftbar. Megacontainer throws it out. How i can contain this inside the leftbar with float property applied to it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#megacontainer{width:100%; height:auto; border:#C03 1px solid; background-color:#0F6;clear:both;}
#leftbar{width:30%; height:auto; border:#C03 1px solid; background-color:#30C; margin-left:80px;}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
</head>

<body>
<div id="megacontainer">
<div id="leftbar">Hello</div><!--end of leftbar-->
</div><!--end of megacontainer-->
</body>
</html>
ASR
  • 1,801
  • 5
  • 25
  • 33
Shailendra Hunt Arya
  • 13
  • 1
  • 4

3 Answers3

0

clear the float inside the megacontainer and not on the megacontainer itself

<div id="megacontainer">
    <div id="leftbar">Hello</div><!--end of leftbar-->
    <div style="clear:both"></div>
</div><!--end of megacontainer-->
ins0
  • 3,918
  • 1
  • 20
  • 28
0

Add an overflow: hidden; to #megacontainer

Neil
  • 2,802
  • 8
  • 34
  • 49
0

Add

overflow:hidden;

to your mega container.

Floated elements don't have a fixed location so parent elements can be unsure what to do with them. setting overflow to hidden forces the element to work out what size it is, therefore including the location of floated child elements, fixing your problem

Link to same problem: Link

Community
  • 1
  • 1
deXter
  • 354
  • 4
  • 21