tedster
msg:1185656 | 9:45 am on Nov 5, 2002 (gmt 0) |
Welcome to WebmasterWorld, slappy. 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.
|
BlobFisk
msg:1185657 | 9:45 am on Nov 5, 2002 (gmt 0) |
Hey Slappy, 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...
|
tedster
msg:1185658 | 9:48 am on Nov 5, 2002 (gmt 0) |
BlobFisk, I thought the very same thing. Either a div, or just a style for the <img> tag. But I tried both directions and got no results - so I started prowling the W3C on this one.
|
BlobFisk
msg:1185659 | 10:37 am on Nov 5, 2002 (gmt 0) |
Another "work-around needed" to add to my list so Tedster! I'm looking forward to being able to cross a few off.... :)
|
SuzyUK
msg:1185660 | 11:33 am on Nov 5, 2002 (gmt 0) |
Hi this works as tested IE6 NS6 and Opera 6.05 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
|
slappy
msg:1185661 | 1:17 pm on Nov 5, 2002 (gmt 0) |
Thanks, 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
|
Nick_W
msg:1185662 | 1:25 pm on Nov 5, 2002 (gmt 0) |
Here's a real simple one. Under your image place this code: <div style="clear: both;"></div> Unless I misread your post that should do the trick... Nick
|
SuzyUK
msg:1185663 | 1:28 pm on Nov 5, 2002 (gmt 0) |
Tim 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
|
slappy
msg:1185664 | 2:30 am on Nov 6, 2002 (gmt 0) |
Dang, 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
|
SuzyUK
msg:1185665 | 11:47 am on Nov 7, 2002 (gmt 0) |
AH...Slappy , are you trying to get the effect that they have with the "leaf" in the top right corner of the left column? (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
|
Nick_W
msg:1185666 | 12:01 pm on Nov 7, 2002 (gmt 0) |
If the image is collapsing the left border you're probably using Mozilla right? 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
|
slappy
msg:1185667 | 4:46 am on Nov 8, 2002 (gmt 0) |
Wow -- you got it -- you all are so helpful. Thanks so much. It works! tim
|
|
