SPAN and IMG on the same line?

Forum Moderators: open

Message Too Old, No Replies

SPAN and IMG on the same line?

Can't seem to get it to work

Br3nn4n

8:00 am on Mar 29, 2009 (gmt 0)

Here's my code:


 <div class="header">
 <a href="index.php"> 
  <img src="THEheadline2.gif" alt="[i][Website][/i] header" border="0" class="headerlogo" />
 </a>
<span class="weatherright">
   <img src="http://l.yimg.com/a/i/us/we/52/33.gif" class="weatherimg" alt="Weather status image" />
  <b>Currently 58&deg;F</b>
  <br />
  High:&nbsp;72&deg;F&nbsp;/&nbsp;Low:&nbsp;49&deg;F
 <br /><b>March 29th, 2009</b>
</span>
</div>

and CSS


.weatherright {
 float:right;
 text-align:left;
 margin-right:60px;
 margin-top: 5px;
 line-height: 1.2em;
 clear: none;
}.weatherimg {
 vertical-align: middle;
 float: left;
}.header {
width: 810px;
padding: 0px; 
  margin: 0 auto;
background: #FFF;
  border: 1px solid #000;
height: auto;
}

And it breaks it into two lines?

Thanks!

[edited by: tedster at 1:42 am (utc) on Mar. 30, 2009]
[edit reason] make specific details more generic [/edit]

Br3nn4n

9:58 am on Mar 29, 2009 (gmt 0)

So it's not just me? No one else has any ideas either? haha

g1smd

6:25 pm on Mar 29, 2009 (gmt 0)

What breaks into two lines? I don't understand the question.

Using

position: relative;

can be useful with floats.

By the way, don't link to "index.html" for index pages. Link to just "/" instead.

Br3nn4n

9:20 pm on Mar 29, 2009 (gmt 0)

Okay, I link to the specific file (index.php) so to ensure it always goes the right place, but that's a great tip. Thanks.

The header section has two things: a logo (left) and a weather feed (right, I built it so there's no outside styling that could be effecting it)

The logo is on the left and the weather on the right. The weather is one line lower than the logo though.

I mean, it's a span next to an img, both inline elements. Why's it doing this?

Thanks!

[edited by: tedster at 1:13 am (utc) on Mar. 30, 2009]

swa66

10:33 pm on Mar 29, 2009 (gmt 0)

I didn't try it, but

.weatherimg {
vertical-align: middle;

might well be the "culprit". It all depends on the size of the image.

Br3nn4n

11:58 pm on Mar 29, 2009 (gmt 0)

You're probably right! Hadn't thought of that. I'll give it a shot in a bit and let you know.