float:right puts the image on the next row

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

float:right puts the image on the next row

Post by davidtube »

The idea is to have a line of text then a small image (the size of a text character) to the right of it. When I float the image to the left it works as expected, but when I float it to the right it is a bit lower than it should be, as if it's at the end of another line.

This moves the image down to the next line for some reason:

Code: Select all

<label>Website Size
       <span class="right">
                 <javascript image thingy here>
         </span>
</label>
Can anyone guess what might be causing it to show on the wrong line.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: float:right puts the image on the next row

Post by Christopher »

If you float it to the right after another block, you will need to float the previous block left so it does not clear.
(#10850)
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: float:right puts the image on the next row

Post by davidtube »

Oh, I'm much worse at CSS than I thought. I thought this code would float the image in line with the text but it takes it out of the line and puts it on the next. What am I supposed to be doing to get the image on the same line?

Code: Select all

 
                            <p>
                                <label>Professional Photographs
                                    <span class="left">
                                        <img src="http://forums.devnetwork.net/styles/prosilver/imageset/site_logo.gif" />
                                    </span>
                                </label>
                                <input name="Checkbox1" type="checkbox" />
                            </p>
 

Code: Select all

.left {float:left;}
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: float:right puts the image on the next row

Post by Christopher »

Just use the align="right" property for the <img> tag.
(#10850)
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: float:right puts the image on the next row

Post by davidtube »

Thanks but it didn't fix the problem.Still appears on the line below.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: float:right puts the image on the next row

Post by Christopher »

The the total of the widths is probably too wide for the container they are in.
(#10850)
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: float:right puts the image on the next row

Post by davidtube »

I don't think so because I'm getting the problem with just this file:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
                            <p>
                                <label>Professional Photographs
                                    <span class="left">
                                        <img src="http://webtogether.co.uk/images/event-1.jpg" />
                                    </span>
                                </label>
                                <input name="Checkbox1" type="checkbox" />
                            </p>
</body>
</html>
and the css just:

Code: Select all

.left {float:left;}
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: float:right puts the image on the next row

Post by davidtube »

Does anyone know what I'm doing wrong?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: float:right puts the image on the next row

Post by Eran »

For a floated right element to appear in the same line, it must be written before any other element / text in that line. Weird CSS behavior, but that's how it works. So for your case:

Code: Select all

 
<label>
      <span class="right">
              <javascript image thingy here>
      </span>
      Website Size //Text after right floated element
</label>
 
Post Reply