Member Avatar for xman

Hi,

I am trying to have a right floating image in my content that needs to appear at 100px from the top of the content. My content should flow around the right image. I managed to do this as follows:

<div style="width:1px;height:100px;float:right;">&nbsp;</div>
<table border="0" cellpadding="0" cellspacing="0" style="padding:15px 0px 10px 10px; clear:right;float:right;" width="337">
<tr><td>image here</td></tr></table>

The 1px div pushes the table down and allows the content to flow around the table. Ok, this works. Now comes the problem.

When I want to left align an image in my content, in FIREFOX, this image jumps down in the content and some content even covers the image. I figured this is because of the clear:right; in my right side table that is influencing my left side image. IE doesn't have this problem.

Any ideas on how to fix this problem?

Thanks!
Xavier

  • 3 Contributors
  • 8 Replies
  • 91 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by xman
Member Avatar for plazmo

firefox and ie display positions in different spots, it irritates me. try this i think it will work

add this style to your body, which takes out the white space around your page, which i think is different between the browsers which is why they display different

<body style="padding:0px ; margin:0px; "></body>

Member Avatar for Sevenupcan

Applying float to an element will make other elements below that element float "left/right" of that element.

For example...

CSS
-----

#photo {float: left;}

-----
XHTML
-----

<img id="photo" scr"image.jpeg" />
<p>Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis.</p>

-----

Should present something like this...

||||||||| Duis molestie ligula nec nunc. Vivamus
||||||||| egestas enim ac dolor. Maecenas et
||||||||| purus. Aenean vel mi ultrices purus
varius sagittis.

I'm not sure if that helps you at all, and if you already knew what I described I didn't mean to patronise you. Perhaps you could post some images of your situation?

Member Avatar for xman

Thanks for the replies, here is the code that illustrates my problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container {width:500px;font-family:arial;font-size:11px;}
.rightimage {float:right;clear:right;margin:20px 0 20px 20px;border:1px solid #ccc;}
.leftimage {float:left;margin:0 20px 20px 0;border:1px solid #ccc;}
</style>
</head>


<body>


<div id="container">
<div style="width:1px;height:80px;float:right;">&nbsp;</div>
<img src="http://www.daniweb.com/techtalkforums/dani-images/misc/dani/logo.gif" class="rightimage" alt="" border="0" />
<img src="http://www.daniweb.com/techtalkforums/dani-images/misc/dani/logo.gif" class="leftimage" alt="" border="0" />Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis.
</div>


</body>
</html>

Looks fine in IE, the left image should be on top left aligned. In Firefox, this images drops down... The right image has to be right aligned at a certain height. Client is king.

Thanks for your help.
X.

Edited by happygeek because: fixed formatting
Member Avatar for Sevenupcan

Ah ok I think I see what you mean now. I'm not near a windows machine to make sure though. Is it that you would like the image to come 100px down from the top of the text? If so, and you use the margin attribute to do this ie. margin: 100px; from what I can remember margins won't appear around images in IE. I can remember for sure though.

From this I presume that your using the div element to create that desired 100px for your right image. In which case is probably not the best method. If what I'm talking about is correct you could try something like the following method...

CSS
-----

.image-wrap {
margin-top: 80px;
float: right;
}

.image-left {
float: left;
padding: 20px;
}

.image-right {
padding: 20px;
}

-----
XHTML
-----

<img class="image-left" src="left-image.jpeg" />
<span class="image-wrap"><img class="image-right" src="right-image.jpeg" /></span>
<p>Your text here</p>

-----

This might not be the most efficient solution to your problem, but it should give you the desired look you want across all platforms.

Member Avatar for xman

Thanks for the input.

I am using the 1px div not only to push down the image, but more importantly to have the content wrap around the right image.

Using a margin-top to get the right image down is preventing my content from wrapping properly.

Hope this makes sense...

Member Avatar for Sevenupcan

Ok now, it makes sense. Hmmm. I'm not sure if it's possible to do that. I'm guessing it would require something a little advanced to create that effect. Not sure if this link helps at all... http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

The other suggestion would be just to move the left image above the div and right img.

For example...

<img class="image-left" src="left-image.jpeg" />
<div style="width:1px;height:80px;float:right;"> </div>
<img class="image-right" src="right-image.jpeg" />

It's not very clean markup, however it should create the illusion on the image being part way down the text.

Member Avatar for plazmo

i swaped the 2 images around so they are in logical order(left before right) and it seemed to fix the problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container {width:500px;font-family:arial;font-size:11px;}
.rightimage {float:right;clear:right;margin:20px 0 20px 20px;border:1px solid #ccc;}
.leftimage {float:left;margin:0 20px 20px 0;border:1px solid #ccc;}
</style>
</head>

<body>

<div id="container">
<div style="width:1px;height:80px;float:right;">&nbsp;</div>
<img src="http://www.daniweb.com/techtalkforums/dani-images/misc/dani/logo.gif" class="leftimage" alt="" border="0" />
<img src="http://www.daniweb.com/techtalkforums/dani-images/misc/dani/logo.gif" class="rightimage" alt="" border="0" />
Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis. Duis molestie ligula nec nunc. Vivamus egestas enim ac dolor. Maecenas et purus. Aenean vel mi ultrices purus varius sagittis.
</div>

</body>
</html>
Member Avatar for xman

That is definately a solution. Let me see if that works for my client, since they work with a cms, and they may want to drop in the image starting at the second paragraph, ie: underneath the right image...

Thanks for your help on this.
X.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.