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