floating problem

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 430,769 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,570 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1415 | Replies: 8

•

Join Date: Apr 2006

Posts: 6

Reputation: xman is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

xman

Offline

Newbie Poster

floating problem

Apr 6th, 2006

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;"> </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

•

Join Date: Aug 2005

Location: Ohio

Posts: 204

Reputation: plazmo is an unknown quantity at this point

Rep Power: 4

Solved Threads: 16

plazmo

Offline

Posting Whiz in Training

Re: floating problem

Apr 7th, 2006

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>

•

Join Date: Apr 2006

Posts: 7

Reputation: Sevenupcan is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Sevenupcan Sevenupcan is offline

Offline

Newbie Poster

Re: floating problem

Apr 8th, 2006

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

For example...

Help with Code Tags

(Toggle Plain Text)

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?

•

Join Date: Apr 2006

Posts: 6

Reputation: xman is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

xman

Offline

Newbie Poster

Re: floating problem

Apr 8th, 2006

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;"> </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.

•

Join Date: Apr 2006

Posts: 7

Reputation: Sevenupcan is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Sevenupcan Sevenupcan is offline

Offline

Newbie Poster

Re: floating problem

Apr 8th, 2006

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

Help with Code Tags

(Toggle Plain Text)

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.

•

Join Date: Apr 2006

Posts: 6

Reputation: xman is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

xman

Offline

Newbie Poster

Re: floating problem

Apr 8th, 2006

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

•

Join Date: Apr 2006

Posts: 7

Reputation: Sevenupcan is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Sevenupcan Sevenupcan is offline

Offline

Newbie Poster

Re: floating problem

Apr 8th, 2006

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....text.wrap.htm

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

For example...

Help with Code Tags

(Toggle Plain Text)

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

•

Join Date: Aug 2005

Location: Ohio

Posts: 204

Reputation: plazmo is an unknown quantity at this point

Rep Power: 4

Solved Threads: 16

plazmo

Offline

Posting Whiz in Training

Re: floating problem

Apr 9th, 2006

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

Help with Code Tags

(Toggle Plain Text)

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

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

•

Join Date: Apr 2006

Posts: 6

Reputation: xman is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

xman

Offline

Newbie Poster

Re: floating problem

Apr 11th, 2006

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.