right float 100px from top doesn’t work
Posted: 22 April 2009 07:20 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-04-22

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.

like so


I can achive the following:

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

float:right 

like so

If i put my

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

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 { width400pxbackground#FFFF00; padding: 5px; } 
.floatright { floatrightheight100pxborder1px solid #000; } 
.offset { width10px}
.imgholder { width100pxclearright

</style
</
head>

<
body>

<
div class="content">

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

<
p>Lorem ipsum dolor sit ametconsectetur adipiscing elitAliquam posuereLorem ipsum dolor sit ametconsectetur adipiscing elit
Cras ornareVestibulum a nulla id velit elementum imperdietNam a purusSuspendisse non enimNullam id semPellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Maecenas aliquet varius tellus
Aliquam sed nunc eu tortor semper vulputateNunc risus.</p>
<
p>Lorem ipsum dolor sit ametconsectetur adipiscing elitAliquam posuereLorem ipsum dolor sit ametconsectetur adipiscing elit
Cras ornareVestibulum a nulla id velit elementum imperdietNam a purusSuspendisse non enimNullam id semPellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Maecenas aliquet varius tellusAliquam sed nunc 
eu tortor semper vulputate
Nunc risus.</p>

</
div>

</
body>

</
html
Profile
 
 
Posted: 25 April 2009 04:20 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  9
Joined  2009-04-09

Hi,
I remember going through all this sandbag testing about a year ago. I ran into the very same issue that you have. I wound up with the conclusion that it was a line-height issue with the flowing text. You will have to set a top and bottom margin on your floated .imgholder div that is greater than the line-height of your text.

Sandbag Demo ~ 1
Sandbag Demo ~ 2
Sandbag Floats vs. Line-Heights

Maybe you will find those links helpful.

Profile
 
 
Posted: 24 May 2009 07:01 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-24

This will do what you want
Kind regards
Angela

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Untitled Document</title>


<
title>float</title>
<
style type="text/css"

.
content {
    width
400px;
    
background#FFFF00;
    
padding5px;
    
positionrelative;

.floatright {
    height
100px;
    
border1px solid #000;
    
top100px;
    
right0px;
    
margin100px 5px 5px;
    
floatright;
    
background#3399CC;




.clearfloat {
    clear
both;
}
</style
</
head>

<
body>
<
div class="content">



<
img src="100X100.jpg" alt="" class="floatright"/>

<
p>Lorem ipsum dolor sit ametconsectetur adipiscing elitAliquam posuereLorem ipsum dolor sit ametconsectetur adipiscing elit
Cras ornareVestibulum a nulla id velit elementum imperdietNam a purusSuspendisse non enimNullam id semPellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Maecenas aliquet varius tellus
Aliquam sed nunc eu tortor semper vulputateNunc risus.</p>

<
p>Lorem ipsum dolor sit ametconsectetur adipiscing elitAliquam posuereLorem ipsum dolor sit ametconsectetur adipiscing elit
Cras ornareVestibulum a nulla id velit elementum imperdietNam a purusSuspendisse non enimNullam id semPellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Maecenas aliquet varius tellusAliquam sed nunc 
eu tortor semper vulputate
Nunc risus.</p>

<
br class="clearfloat" />

</
div>

</
body>
</
html
Profile