Forum Moderators: not2easy
There are several workarounds that I have found, but they all seem like there is a much better way. They are: 1. to set the height of the layer greater than the picture I am containing 2. to include a long transparent gif in the left side of the picture (which is why I left tables in the first place) and 3. to include a lot of font in the same color as the background color to push the layer underneath the picture on the right.
To explain my quandry please refer to the following test code:
<head><style type="text/css">
div.main {
background-color: #CCC;
margin: 20px 40px;
border: thin dashed gray;
padding: 1%;
}
</style></head>
<body>
<div class="main">
<span style="float:right; width:20px">this is side layer content that always exceeds it boundaries</span>
this is some sample content</div>
</body>
</html>
Please help -- I am very frustrated and would appreciate any help I can get . . .
Tim
If I understand your situation correctly, this is an area of need where the W3C is struggling about what to do. I found a long email exchange where some feel there is a need for a float-overflow property (sounds good to me!) Since this kind of layout is relatively common when putting a catalogue online, it really does need a solution.
The problem comes up when an element is floated relative to a block level element. The spec for "float" removes the element from the normal document flow in that situation. This means that the containing div will not automatically expand to include a floated element that overflows the containing box.
Until there is a standard recommendation (and browsers that support it) I think you will need a workaround to get the main div to enclose the floated image.
I like your first proposal - setting a height on the main div that is larger than the floated image. However, I can see that this could get complicated if you're building a dynamic page with database elements. Still, it seems the least kludgy and easiest to work with.
Have you tried using a nested <div> instead of a <span> as the holder for your image? A have a feeling that a <div> tag would be a better way of doing this...
I've commented the code to explain:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css"><!--
body{
margin: 20px 40px; /* margins added to body otherwise IE gets 'confused' :) */
}
.main{
background-color: #ccc;
color: #000;
border: thin dashed gray;
margin: 0;
padding: 10px; /* the padding will upset IE but change the width of the span.left to compensate */
}
div.main span.left {
float: left;
text-align: left;
width: 76%; /* decrease this to add spacing between the two 'columns' */
}
div.main span.right {
float: right;
width: 19%;
}
div.clear{clear:both;}
--></style>
</head>
<body>
<div class="main">
<div class="clear"></div>
<span class="left">
this is some sample content this is some sample content this is some sample content this is some sample content
</span>
<span class="right">
this is side layer content that always exceeds its boundaries
</span>
<div class="clear"></div>
</div>
</body>
Suzy
I give it a try with two floating spans. My first attempt doesn't work, but I am sure I am doing something wrong. (My image acts just like it is inline without any float property at all.)
Thanks again for your help . . .
Tim
<div style="clear: both;"></div>
Unless I misread your post that should do the trick...
Nick
change the width of the <span left> to suit the size of your images (it can be px if you want) then adjust the %width of the <span right> to suit....
btw the <div clears> are important as they provide the "content" to the main div to get around the fact that floated divs "don't take up any space".
I tested this with an image too and it did work for me...
Suzy
I guess I just don't get it -- your comments are very helpful, but for some reason whenever I include the floating image on the right the left margin goes to zero!
Now the image pushes the div down underneath it (with the nifty addition of the <div class="clear"></div> but when I introduce the floating image the div goes all the way to the left side.
I am experimenting with bluerobot's (bluerobot.com) two column layout and can't insert a floating image in the middle. I am sure someone else has tried and failed at this too!
thanks,
tim
(the leaf in the header is placed by absolute positioning)
if so this is done by making the image a background image on the left div and positioning it to the right with no repeat specified....
e.g.
div.left
{
background-image:url(your.gif);
background-repeat:no-repeat;
background-position:top right;
}
Suzy
It's a bug. But there's an easy fix:
put an inline element directly before the clear.
<img src="blah" class="blah" />
<div class="clear"></div>
Nick
It works!
tim
