CSS and width of an element

[theniteowl]

Hi All,
I am trying to use a span tag with some text in it and a style applied to the span.
Is it possible to get the span to only be as wide and tall as the text inside it without having to specify exact dimensions? The text content and even font settings may change in which case the span will have to accomodate that change as well but if I do not specify an exact width in CSS it grows to the full width of the screen.

Also, if I place several of these spans side by side I have problems with them wrapping to the next line and stacking above each other rather than ligning up side by side.

Help?
If it can be done can you give an example with a simple style that just changes the background color to distinguish it on the page?
I would post code but the CSS is doing a LOT more than what I describe above and would just be confusing. If I can just see how to get the width to only set itself as wide as the text within I should be able to modify my own code.

Thanks.

Stamp out, eliminate and abolish redundancy!

 

[Vragabond]

Span is an inline element and as such does not have a valid width. It is just as wide as the text it holds. If you want it to actually have a width, you need to change it to block level element and/or float it. In that case you can still have it as wide as the text by using [tt]width: auto;[/tt]. But yes, floated or inline, the element will go to the next line if it reaches the end.

 

[manarth]

To add to that, a span which is styled as a block level element behaves to all intents and purposes as a div.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

 

[theniteowl]

I was avoiding divs because of the inherant spacing they include between themselves and the next element.
This might be addressable through CSS, I do not know.
I am pretty new to CSS and trying to do something rather complex.


Stamp out, eliminate and abolish redundancy!

 

[BillyRayPreachersSon]

There is no inherent spacing between div elements unless you style them that way.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

IE has always added a few pixels of extra space on me when using divs. I was not using stylesheets and perhaps could have prevented it. Or perhaps it was something else causing the spacing but I switched to spans in those locations to clear up the problem.

But, for this problem.
What I need to do is have 4 little elements that make up the top left and top right corners with the text in the middle. The corners have to be displayed block so they stack. This makes up the curved edge effect for the tab rather than using graphics. Then the text sits in the middle. I can do this well enough in a table structure to keep things from dropping to the next line but I want to eliminate the tables. And then of course is the problem with the width of the text not pushing out the width of the element it is all contained in.

So I have 4 defined items that are 1-2 pixels high each and of varying width that stack on top of each other to create what appear to be curved borders of the tab. The same items make up both left and right top curved edges.
Then I have the text styled with it's own class.
I know it is a problem using block and inline elements mixed I just do not know how to get around it.


Stamp out, eliminate and abolish redundancy!

 

[BillyRayPreachersSon]

You might find that floating the inline elements and setting their width to auto does the job.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]