3 replies [Last post]
captainbeaky
Offline
newbie
Last seen: 15 years 14 weeks ago
Joined: 2004-04-08
Posts: 4
Points: 0

Hi,

I am working on a website using CSS floats and have come across a problem which I cannot see the way around. So any help would be gratefully received.

I am using the following CSS to create a div to contain a set of curves floated left, some text in the middle and a picture on the right hand side.

div#wrap { width: 760px;
height: 215px; }

div#wrap img.curve { float: left;
clear:left;
padding: 0;
border: 0; }

div#wrap img.heright { position: relative;
float: right; }

This can be seen in action at the following URL:

http://millenniumdivecentre.co.uk/New/tr_main.php

when I view this in Opera or IE 6, IE 5 for Mac, Avant all appears ok and the images floated right appears with the text flowing to the left of the image.

However, in NS7, Mozilla, K-Meleon (yes all Mozilla Based) the images floated right appears below the text, rather than inline with it.

Any thoughts on what I have done wrong/missed ?

Cheers

CaptainBeaky

PS. Any thoughts about the site (http://millenniumdivecentre.co.uk/New) in particular would be great to hear !).

captainbeaky
Offline
newbie
Last seen: 15 years 14 weeks ago
Joined: 2004-04-08
Posts: 4
Points: 0

Re: problem with floated elements in NS7/Mozilla

Since no one has come up with an elegant solution to the problem, i have set up a workaround where I have set an additional style on the text as such

div#wrap p.short { padding-right: 210px; }

To shorten the text in the containing div, and then position absoutely the picture to fit in the space left.

CaptainBeaky

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 25 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

problem with floated elements in NS7/Mozilla

I think that it is all down to the float left images forcing the float right image down. In this case I think that Mozilla etc is correct.

Just move the heading and image up the html list a bit.

<div id="wrap">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_2.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_3.jpg" class="curve" alt="Graphical Curve">		

<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_4.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_5.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_6.jpg" class="curve" alt="Graphical Curve">		
<h1>Training - Overview</h1>
<img src="http://millenniumdivecentre.co.uk/New/images/eels.jpg" class="heright" alt="Eels - © Paul Mason" >
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_7.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_8.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_9.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/hd_10.jpg" class="curve" alt="Graphical Curve">
<IMG SRC="http://millenniumdivecentre.co.uk/New/images/bkgnd.jpg" class="curve" alt="Graphical Curve">
<!-- top heading and summary of page -->
Diving is a rapidly growing fun sport for virtually everyone, young & old. The 
pleasures of diving are many and everyone has something to gain from learning to dive. 
Learning to dive has never been easier, safer or more exciting.
We offers a wide variety of diver training to suit the individual from the basic 
of Try Dives to full on technical closed circuit re-breather programs.


</div>

Oh, there was also a rogue <p> in the text Wink

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

captainbeaky
Offline
newbie
Last seen: 15 years 14 weeks ago
Joined: 2004-04-08
Posts: 4
Points: 0

problem with floated elements in NS7/Mozilla

Cheers for that,

The image is now in the right place !

Thanks for that !