PDA

View Full Version : seconds right float doesn't work



3v1l5w1n
Apr 22nd, 2009, 10:29 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
Apr 22nd, 2009, 11:33 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]

jlhaslip
Apr 23rd, 2009, 01:03 AM
Or add some margin-top to the second floated item equal to 1 line-height of the text. I tested using 1em and it worked fine in FF.


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

abduraooft
Apr 23rd, 2009, 10:50 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> Your DOCTYPE is incomplete. Fix it first, to fix your document (http://www.alistapart.com/articles/doctype).