Page 1 of 1

float:right puts the image on the next row

Posted: Tue May 06, 2008 10:52 am
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.

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

Posted: Tue May 06, 2008 12:03 pm
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.

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

Posted: Tue May 06, 2008 1:55 pm
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;}

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

Posted: Tue May 06, 2008 1:57 pm
by Christopher
Just use the align="right" property for the <img> tag.

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

Posted: Tue May 06, 2008 3:58 pm
by davidtube
Thanks but it didn't fix the problem.Still appears on the line below.

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

Posted: Tue May 06, 2008 4:39 pm
by Christopher
The the total of the widths is probably too wide for the container they are in.

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

Posted: Tue May 06, 2008 4:54 pm
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;}

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

Posted: Wed May 07, 2008 4:55 am
by davidtube
Does anyone know what I'm doing wrong?

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

Posted: Sat May 10, 2008 8:37 pm
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>