Member Avatar for ingrammusic

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>Insidediv<br><br><br><br><br><br><br><br><br><br><br><br><br>maindiv should expand dynamically based on the content of this div, and it should fully enclose this div</p></div>
</div>
</body>
</html>
  • 4 Contributors
  • 3 Replies
  • 143 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for JugglerDrummer

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>
Member Avatar for essential

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>
Member Avatar for MidiMagic

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.