Log in

View Full Version : Resolved 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.

http://img16.imageshack.us/img16/6968/89769884.jpg


I can achive the following:

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

http://img16.imageshack.us/img16/4546/61616552.jpg

If i put my
p elements before the
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

http://img16.imageshack.us/img16/7676/68211721i.jpg

Can anyone help me with this ... thank you

p.s. here's my html


<!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"


<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


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