Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

Can CSS Contain a Floated Image within the Parent Div?

I want to be able to include pictures into a div

   
2:46 am on Nov 5, 2002 (gmt 0)

10+ Year Member



For some reason I can't figure out a way to include a picture in the right side of main css content area that is longer than the text on the left.

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

9:45 am on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

9:45 am on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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...

9:48 am on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
10:37 am on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Another "work-around needed" to add to my list so Tedster! I'm looking forward to being able to cross a few off.... :)
11:33 am on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

1:17 pm on Nov 5, 2002 (gmt 0)

10+ Year Member



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

1:25 pm on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

1:28 pm on Nov 5, 2002 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

2:30 am on Nov 6, 2002 (gmt 0)

10+ Year Member



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

11:47 am on Nov 7, 2002 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

12:01 pm on Nov 7, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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" />
&nbsp;<div class="clear"></div>

Nick

4:46 am on Nov 8, 2002 (gmt 0)

10+ Year Member



Wow -- you got it -- you all are so helpful. Thanks so much.

It works!

tim

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month