homepage Welcome to WebmasterWorld Guest from 184.73.52.98
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Can CSS Contain a Floated Image within the Parent Div?
I want to be able to include pictures into a div
slappy




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

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

 

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" />
&nbsp;<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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved