seconds right float doesn't work

**3v1l5w1n** · 04-22-2009, 08:28 PM

Hi guys, I've trying to achieve the following.

I want to have a div element floating on the right 100px from the top and the rest of content is filled with text.

I can achive the following:

Have the image float on right, but 0px from top, using simple

Code:

float:right

If i put my

Code:

elements before the

Code:

image

in my html, the image's position (y-coordinate) will change as the content changes (I want it always 100px from top no matter what).

I've tried to add another right-floated element with width 10px; (or so) "on top". This places my image correctly, but the the text overflows beneath the floated image (note that if my top div has width greater than my image everything works fine). I've tested this in both FF 3 and IE7 with the same outcome

Can anyone help me with this ... thank you

p.s. here's my html

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">



<html>

<head>

<title>float</title>

<style type="text/css"> 



.content { width: 400px; background: #FFFF00; padding: 5px; } 

.floatright { float: right; height: 100px; border: 1px solid #000; } 

.offset { width: 10px; }

.imgholder { width: 100px; clear: right; } 



</style> 

</head>



<body>



<div class="content">



<div class="floatright offset"></div>

<div class="floatright imgholder"><h1>image</h1></div>



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque 

habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. 

Aliquam sed nunc eu tortor semper vulputate. Nunc risus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque 

habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc 

eu tortor semper vulputate. Nunc risus.</p>



</div>



</body>



</html>

**3v1l5w1n** · 04-22-2009, 09:36 PM

just in case someone is wondering, the trick is to increase the width gradually up to 100px ... I've got around by doing this:

1.) make all div's clear: right; and float: right;
2.) get to [my image] 100px "step by step"

PHP Code:


<style>

.float-right { clear: right; float: right; }

</style>

....

<div class="float-right" style="width: 10px; height: 80px; "></div>

<div class="float-right" style="width: 80px; height: 20px; "></div>

<div class="float-right" style="width: 100px; height: 100px; ">[my image]</div>



<p>....

the key seems to be to have the last div before [my image] div sized big enough so that the text can adjust correctly around [my image]

**3v1l5w1n** · 04-23-2009, 12:26 AM

Actually, more elegant css solution seems to be to add some margin-top to the second floated item equal to 1 line-height of the text. I tested in FF and IE7 and it works

PHP Code:


.content { width: 400px; background: #FFFF00; padding:5px; }

.floatright { float: right; height: 100px; }

.offset { width: 0px; }

.imgholder { width: 100px; clear: right; margin-top: 1em; border: 1px solid #000; }

Thread: seconds right float doesn't work

Thread Tools

Search Thread

seconds right float doesn't work

Bookmarks

Bookmarks

Posting Permissions