CSS Drive forums | right float 100px from top doesn’t work

right float 100px from top doesn’t work

3v1l5w1n

Posted: 22 April 2009 07:20 PM

[ Ignore ]

Newbie

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 { 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> 

Profile

Rayzur

Posted: 25 April 2009 04:20 AM

[ Ignore ] [ # 1 ]

Newbie

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

Angela

Posted: 24 May 2009 07:01 AM

[ Ignore ] [ # 2 ]

Newbie

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;
    padding: 5px;
    position: relative;
} 
.floatright {
    height: 100px;
    border: 1px solid #000;
    top: 100px;
    right: 0px;
    margin: 100px 5px 5px;
    float: right;
    background: #3399CC;
} 



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

<body>
<div class="content">



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

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

<br class="clearfloat" />

</div>

</body>
</html> 

Profile

‹‹ print stylesheet External CSS Not loading in browser ››