box div does not expand because of floated image

**br14n** · Dec 18, 2003 15:58

There is a gray box containing a div which contains an image. The div that contains the image floats left so that the text flows around it. The problem is that the outer div does not expand to contain the div containing the image because the div containing the image is floated left.

Fixable? TIA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">

</style>
</head>

<body>
<div id="main">
<div class="box">
<div class="t100">
<img src="x.jpg" alt="image alt text" />
</div>
Blah blah blah, words words words.
</div>
</div>
</body>
</html>

**Paul O'B** · Dec 18, 2003 16:30

Hi,

A float is removed from the flow and will extend out of the container that holds it if it is bigger than the container. This is by design.

The property clear was designed in order to use in situations like this and you simply need to insert a clear statement after your text. This will force the container to encompass your float.

Code:

Blah blah blah, words words words.
<div style="clear:both" /></div>
</div>

Hope this helps.

Paul

**br14n** · Dec 18, 2003 17:00

Thanks very much for your quick response. I tried something similar to what you suggested, but I guess I didn't see that it was the correct answer because I have two boxes, side by side. Do you have any idea how to disconnect the right-side box from the left-side one? Both boxes should just be as tall as they need to be based on their content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">

</style>
</head>

<body>
<div id="main">
<div id="left">
<div class="box">
<div class="t100">
<img src="x.jpg" alt="image alt text" />
</div>
Blah blah blah, words words words, blah blah blah, words words words, blah blah blah, words words words.
<div class="clr"></div>
</div>
</div>

<div id="right">
<div class="box">
<div class="t100">
<img src="y.jpg" alt="image alt text" />
</div>
This is the stuff on the right.
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>

**Paul O'B** · Dec 18, 2003 17:19

Hi,

I'm not quite sure if this is what you mean but ie likes a width on its floats or on containers that hold floats.

Code:

#right {
width:48%;
margin: 0 0 1% 51%;
}

This will separate the floats.

Paul

**br14n** · Dec 18, 2003 17:31

Thanks, but what I mean is that the right-side box's height is much greater than its contents require. It should be the shorter of the two boxes, because it contains less content.

But because of the clear:both, the right-side box seems to be basing its height on the height of the left-side box.

**Paul O'B** · Dec 18, 2003 17:48

Hi,

I think if you try the code out it also achieves that effect.

Paul

**br14n** · Dec 18, 2003 17:55

Well, of course I tested the code before I posted. In Opera, at least, the right-side box is wrongly taller than the left-side box.

**Paul O'B** · Dec 18, 2003 18:06

Hi,

Well, of course I tested the code before I posted. In Opera, at least, the right-side box is wrongly taller than the left-side box.

Sorry

You'd be surprised how many people don't try it out.

Anyway it worked in moz but all Opera requires a couple of position:relatives as follows.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
#main {
margin: 0 auto 0 auto;
width: 40%;
}
.box {
background: #e0e0e0;
border: 1px solid black;
padding: 2%;
position:relative;
}
.t100 {
background: #fff;
border: 1px solid black;
float: left;
height: 100px;
margin-right: 2%;
text-align: center;
width: 100px;
position:relative;
}
#left {
float: left;
margin: 0;
width: 50%;
position:relative;
}
#right {
width:48%;
margin: 0 0 1% 51%;
position:relative;
}
.clr {
clear: both;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="left">
<div class="box">
<div class="t100">
<img src="x.jpg" alt="image alt text" />
</div>
Blah blah blah, words words words, blah blah blah, words words words, blah blah blah, words words words.
<div class="clr"></div>
</div>
</div>
<div id="right">
<div class="box">
<div class="t100">
<img src="y.jpg" alt="image alt text" />
</div>
This is the stuff on the right.
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>

That should work.

paul

**br14n** · Dec 18, 2003 19:14

Hmm. I cut and pasted the code into test3.html and checked it in Opera 7.23, and the problem still remains. I downloaded Mozilla Firebird to check it there, and I see that the problem is fixed there. I guess I'll keep messing around, trying to get that right-side box to shorten up in Opera.

Thanks for all the code and effort.

**Paul O'B** · Dec 19, 2003 02:57

Hi,

It must be a bug in 7.23 as it works perfectly in opera 7.02?

As I haven't got 7.23 installed you'll just have to play around with it a bit to see what works. I suggest you simplify it right down and try to get it to work from the ground up.

However I've changed it so that it works in Opera 6 now (which i do have installed) so maybe this will work for your 7.23 as well.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
#main {
margin: 0 auto 0 auto;
width: 40%;
}
.box {
background: #e0e0e0;
border: 1px solid black;
padding: 2%;
position:relative;
}
.t100 {
background: #fff;
border: 1px solid black;
float: left;
height: 100px;
margin-right: 2%;
text-align: center;
width: 100px;
position:relative;
}
#float {
float: left;
margin-left:1% ;
width: 46%;
position:relative;
}
.clr {
clear: both;
}
-->
</style>
</head>
<body>
<div id="main"> 
  <div id="float"> 
	<div class="box"> 
	  <div class="t100"> <img src="x.jpg" alt="image alt text" /> </div>
	  Blah blah blah, words words words, blah blah blah, words words words, blah 
	  blah blah, words words words. 
	  <div class="clr"></div>
	</div>
  </div>
  <div id="float"> 
	<div class="box"> 
	  <div class="t100"> <img src="y.jpg" alt="image alt text" /> </div>
	  This is the stuff on the right. 
	  <div class="clr"></div>
	</div>
  </div>
</div>
</body>
</html>

Hope that helps.

Paul

**br14n** · Dec 19, 2003 11:03

That looks great! Thanks very much.

User Tag List

Thread: box div does not expand because of floated image

Thread Tools

Display

box div does not expand because of floated image

Bookmarks

Bookmarks

Posting Permissions