float takes div out of container, need help

The div on the inside is floated to the left. This makes that whole div outside the border of the containing div. If I take the "float: left" property away from it, then that entire div will be inside the containing divs borders. Why is this so, and what can I do to make the inside div inside the borders of the containing div, while keeping its float property.

<html>
<body>
<div class="maindiv" style="border:2px solid red;"><p>main Div that needs to expand based on content of "insidediv"</p>
<div class="insidediv" style="border:1px solid blue; float: left; width: 100%;"><P>Insidedivmaindiv should expand dynamically based on the content of this div, and it should fully enclose this div</p></div>
</div>
</body>
</html>

ingrammusic

Newbie Poster

22 posts since May 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

divs are block elements, so they take up as much space as the can. Unbounded, the div will fill its entire container. To get the div where you want it, try

<div style="position: relative;">
<div <style="position: absolute; left: 0px;">
</div>
</div>

JugglerDrummer

Junior Poster

139 posts since Apr 2009

Reputation Points: 14

Solved Threads: 22

2 Years Ago

Just provide wrapper's or tubes inside your floated div to preserved the whole layout.
Try this one:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Floating div</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #fff;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

div#wrapper {
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.maindiv {
  border-top : 2px solid #E00;
  border-bottom : 2px solid #E00;
  min-height : 600px;
  clear : both;
  float : left;
  width : 100%; } div.maindiv div.tube {
  padding : 1em;
  border-left : 2px solid #E00;
  clear : both;
  height : inherit;
  border-right : 2px solid #E00; }

div {
  border : none;
  padding : 0;
  margin : 0;
}

div.insidediv {
  border-top : 1px solid #00F;
  border-bottom : 1px solid #00F;
  height : inherit;
  clear : both;
  float : left
  width : 100%; } div.insidediv div.tube {
   padding : 1em;
   border-left : 1px solid #00F;
  clear : both;
  height : inherit;
   border-right : 1px solid #00F; }

div.spacer { min-height : .600em; float : left; clear : both; }

p { text-align : left; }
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
<div class="maindiv">
<div class="tube">
<p>main Div that needs to expand based on content of "insidediv"</p>
<div class="insidediv">
<div class="tube">
<p style="white-space : pre;">Insidediv




maindiv should expand dynamically based on the content of this - 
div and it should fully enclose this div.</p>
<p>The div on the inside is floated to the left. This makes that whole div outside the border of the containing div. If I take the "float: left" property away from it, then that entire div will be inside the containing divs borders. Why is this so, and what can I do to make the inside div inside the borders of the containing div, while keeping its float property.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
</body>
</html>

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

2 Years Ago

Divs do NOT always expand to fill their containers. This is a known bug in the definition of div.

They seem to work correctly if nothing but text is present, but if you put a div inside something else (especially a table cell), or if you put something else (such as an image, or a bunch of br tags) inside the div, then strange things happen. The div shrinks smaller than its container, or expands beyond the bounds of its container. Different browsers often behave in different ways in these cases.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

This article has been dead for over three months

You