styling element to appear on new line

I am working on editing an existing style sheet. Here is the code I am looking at:

<div class="tclcon">
	Test post <span class="byuser">by Koos</span> says hallo
</div>

PHP:

Now: I want the "by Koos" text, which is in a span element, to appear on a new line. It is not possible for me to insert a <br> in the code itself, so I am trying to achieve the same result in css.

I have tried to use:
SPAN.byuser {display:block}

but then the above is displayed in 3 lines:

What I would like to see is:

Anybody know how to do this?

 

But actually the following will also do (actually what I prefer):

Is it possible to do this? Maybe by using some kind of 'float'?

 

either
Test post says hallo<br />
by Koos
Floating spans in ff will usually give you bad results.

 

Yes, but like I said: I can't change anything (like add <br />) to the code itself. I've only got the style sheet to work with.

Edit:
Well, SPAN.byuser {float: left;} seems to do the trick - but doesn't work in all browsers (for example Safari).

 

Perhaps you can try like this:

.tclcon {float:left;}
.tclcon span {display:block;}

 

Look into display: inline-block.

What you already have may not be working in Safari because, I've noticed, it's much pickier than other browsers when it comes to widths and text. I always have to set more room for things like form buttons just so Safari shows all the text. So the current CSS you have may work in Safari simply by setting the width of the parent a bit bigger.

 

I don't think you can do this in CSS

 

Why not:

<div class="tclcon">
    Test post <span class="nextline"><span class="byuser">by Koos</span> 
    says hallo</span>
</div>

Code (markup):

with css:

 span.nextline{display:block;}
 

Code (markup):

or

<div class="tclcon">
    <p>Test post</p>
    <p><span class="byuser">by Koos</span>  says hallo</p>
</div>

Code (markup):

* I'm assuming here that you're planning to style class="byuser" that's why I'm leaving it as is.

 

I think we're assuming the HTML cannot be changed, otherwise he would have just moved his BR elsewhere.

 

If we couldn't change the html or position of the words, what I've mentioned above wouldn't work.

But as Stomme poes said by setting the width of the parent a bit bigger, it will get a scroll text in the sidebar, to make it clear we change it to percentage.

span.byuser {width:100%;float:left;}

 

Thanks for the ideas. I got it to work now - and displays correctly in all the browsers I have tested it in (ie6, ie7, firefox 2 and 3, avant browser, opera 9, safari). I used the following:

SPAN.byuser {float: left;#position: relative;width:100%}

Code (markup):

Safari requires the 'width:100%'

and ie6 the '#position: relative' - since I was also using some css to center vertical align the block.

 

That CSS is not valid. No hash marks are allowed in the middle of a declaration like that. What is this for IE6??

 

The '#position: relative' was actually needed for ie6, since I was making use of some other fancy css to center verticle align the contents.

 

.byuser {display:block; margin-right:0;}

 

It's NOT valid code. Not valid code and not even a valid hack. There's zero reason to use it. Who knows which new version of any browser will see that and choke. #position: relative does nothing for IE6.