SPAN size and background image

[stymiee]

Finally getting off of my lazy butt and am going to attempt to do a very simple site tableless. Naturally I didn't get far before I ran into problems. I have a containing DIV id'd as "header". Within it is a span which is causing me problems. I'm trying to get a background image into the span (which works) but have that span be 390x90 instead of just the size of any text within it. If I type asdf with the SPAN I can see the bg image but it only is behind the text as the SPAN is not taking the size I have tried to dictate to it.

div#header span
{
    background: url('images/bghead.jpg') repeat-x;
    height: 90px;
    width: 390px;
}

I hope that all made sense.

[vgarcia]

A span is an inline element, so widths and heights are ignored. To remedy this, use "display: block;" in your CSS for the span (which will make it behave like a block element and use your dimensions set), or if you need block-level content go for a div instead.

[stymiee]

I actually was swicthing to a DIV when I read this. Now I know it will work. The reason I used SPAN was because it is inline. I assumed it would "flow". This leads me to a new problem: how do I get two block elements to sit side-by-side (an image and a SPAN?

[vgarcia]

I actually was swicthing to a DIV when I read this. Now I know it will work. The reason I used SPAN was because it is inline. I assumed it would "flow". This leads me to a new problem: how do I get two block elements to sit side-by-side (an image and a SPAN?

Floating or absolute positioning. Both of them have their benefits and drawbacks. Search the CSS forum for more info; there are a million and one threads on this topic

[stymiee]

Will do. Thanks.