By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

newline before element?

P: n/a
Can a <span> element be made to appear in new line without making it a block
element?

I have the following code:
<span class="one">one</span>
<span class="two">two</span>
<span class="three">three</span>
<span class="four">four</span>

and I want to achieve the following:

one two
three four
Thanks in advance,
suncho
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
"Atanas Boev" <su*************@cs.tut.fi> writes:
Can a <span> element be made to appear in new line without making it a block
element?

I have the following code:
<span class="one">one</span>
<span class="two">two</span>
<span class="three">three</span>
<span class="four">four</span>

and I want to achieve the following:

one two
three four


Suncho, I don't think I understand the question. Why not:

<p>
<span class="one">one</span>
<span class="two">two</span>
<br />
<span class="three">three</span>
<span class="four">four</span>
</p>

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #2

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
"Atanas Boev" <su*************@cs.tut.fi> writes:
Can a <span> element be made to appear in new line without making it a block element?

I have the following code:
<span class="one">one</span>
<span class="two">two</span>
<span class="three">three</span>
<span class="four">four</span>

and I want to achieve the following:

one two
three four


Suncho, I don't think I understand the question.


I meant if it is possible only through CSS definitition of the classes "two"
or "three" somehow without the need of <br />. But you are right, if they
have <br /> probably thats the only way... or is it? I found something like
"display: run-in" but I got the impression it's only for headings.

suncho
Jul 20 '05 #3

P: n/a
Atanas Boev wrote:
Can a <span> element be made to appear in new line without making it a
block element?

I have the following code:
<span class="one">one</span>
<span class="two">two</span>
<span class="three">three</span>
<span class="four">four</span>

and I want to achieve the following:

one two
three four


If you want to avoid using a <br> element, then you could use generated
content:

span.three:before {
content: "\a";
}

That's not well supported across browsers, though.

--
Jim Dabell

Jul 20 '05 #4

P: n/a
"Atanas Boev" <su*************@cs.tut.fi> writes:
"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
"Atanas Boev" <su*************@cs.tut.fi> writes:
Can a <span> element be made to appear in new line without making it a block element?

I have the following code:
<span class="one">one</span>
<span class="two">two</span>
<span class="three">three</span>
<span class="four">four</span>

and I want to achieve the following:

one two
three four


Suncho, I don't think I understand the question.


I meant if it is possible only through CSS definitition of the classes "two"
or "three" somehow without the need of <br />. But you are right, if they
have <br /> probably thats the only way... or is it? I found something like
"display: run-in" but I got the impression it's only for headings.


Oh, I see. Well, this is probably illicit, but it works on my
browser, anyway:

.three, .four {
position: relative;
top: 0.5em;
float: left;
}

<span class="one">one</span>
<span class="two">two</span>
<span class="three">three </span>
<span class="four">four</span>

On my brouser I get:

one two

three four

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #5

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
Oh, I see. Well, this is probably illicit, but it works on my
browser, anyway:

.three, .four {
position: relative;
top: 0.5em;
float: left;
}

<span class="one">one</span>
<span class="two">two</span>
<span class="three">three </span>
<span class="four">four</span>
I love it. As you're putting spaces between the spans and a
non-breaking space within a span, it will reduce to one space
like normal?
On my brouser I get:

one two

three four


I just like how you spell browser. At first, I read "On my
trouser I get" and it amused me!
Jul 20 '05 #6

P: n/a
"Neal" <ne**@spamrcn.com> writes:
"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
Oh, I see. Well, this is probably illicit, but it works on my
browser, anyway:

.three, .four {
position: relative;
top: 0.5em;
float: left;
}

<span class="one">one</span>
<span class="two">two</span>
<span class="three">three </span>
<span class="four">four</span>


I love it. As you're putting spaces between the spans and a
non-breaking space within a span, it will reduce to one space
like normal?


a) Re. spaces between spans (two and three/four I assume you mean)
that is done with relative positioning. Isn't that legit for in-line
elements? The space-reduction routine should have no effect here.

b) Re. the non-breaking space within a spam (using &##160;). That
is certainly improper, but works in a practical sense and avoids the
collapsed space to which you refer. If I want to behave myself, I'd
get rid of the " " and add instead a "padding-right: 5px;"
attribute to the style definition of .three and .four.

If I understand your rhetorical question correctly, there is no
"reduction to one space" on my browser (galeon), and I don't see why
there should be. How's it look on your "brouser"? The   is not a
space, but an empty character.

One problem with my scheme is that it gets mixed in with other
elements that may happen be on the page, and I don't know how to
prevent that withough resorting to blocks (div). Also, I believe the
two lines should be placed in a container, such as <p>. Am I right? If
so, that would violate one of the parameters of the challenge.

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #7

P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
If I understand your rhetorical question correctly,


It wasn't rhetorical. It was serious. I've never tried it,
perhaps I should do the experiment.

The "brouser" thing just made me laugh. No offense intended.
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.