I have Problem in Placing a floating DIV container in its parent container. The output of this code is according to my requirement in Internet Explorer but not in Firefox. The thing is when I add "float:left;" to my "#leftSidebar" ID in CSS then the height "#wrapper" and "#container" don't increase according the height of "#leftSidebar" in Firefox and "#leftSidebar" ID appears outside from these 2 containers(DIVs) but output is according to my requirements in Internet Explorer. If you Run following code in both of the browsers then you will understand better that what is the problem. <html> <head> <title>Home Page</title> <style type="text/css"> body { top:0px; right:0px; } #wrapper { width:990px; margin:0px auto; background-color:#666666; } #container { width:980px; margin:5px; border:#00FFFF 1px dashed; } #leftSidebar { width:180px; float:left; border:#000000 1px dashed; } </style> </head> <body> <div id="wrapper"> <div id="container"> <div id="leftSidebar">Left Sidebar</div> </div> </div> </body> </html> HTML: In nutshell, I want when I increase the height of "#leftSidebar" then height of "#wrapper" and "#container" should also increase automatically. Thanks in advance for any type of help, Jimmy
Parent elements are never to expand to contain floated elements because floats are removed from the normal flow. Never, ever use IE as a reference for how things work. It's inept at best and 12 years behind all other in modern standards and practices. Firefox is showing what you wrote. To do what you want, add 'overflow:auto' to the parent element. In addition, you will never get IE to attempt to perform like other far more modern browsers without a proper doctype. Add this to your first line: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">