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

Width of span elements

P: n/a
http://ataru.gomen.org/files/html/files/test.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Test page</title>
<style type="text/css">
.center { margin-left: auto; margin-right: auto; text-align: center; }
#listdiv { width: 400px; margin-left: auto; margin-right: auto; }
#listdiv span.left { margin-left: 20px; width: 160px; }
#listdiv span.right { margin-left: 20px; width: auto; }
</style>
</head>
<body>
<h1 class="center">Hello, world!</h1>
<div id="listdiv">
<span class="left">Data:</span>
<span class="right">Value</span><br />
<span class="left">More data:</span>
<span class="right">Another value</span><br />
</div>
</body>
</html>

I'm trying to get span elements to align themselves in two columns,
like a table except cleaner. I'm trying to make the left span
elements a certain width, but non-replaced elements can't have a width
(or so my O'Reilly CSS book claims). How can I get the effect I want
here if I can't specify a width?

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Christopher Benson-Manica <at***@nospam.cyberspace.org> spoke thus:
I'm trying to get span elements to align themselves in two columns,
like a table except cleaner. I'm trying to make the left span
elements a certain width, but non-replaced elements can't have a width
(or so my O'Reilly CSS book claims). How can I get the effect I want
here if I can't specify a width?


Rather, inline elements can't have a width, whereas block elements
can. Sorry.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 20 '05 #2

P: n/a
Christopher Benson-Manica <at***@nospam.cyberspace.org> wrote:
but non-replaced elements can't have a width
(or so my O'Reilly CSS book claims). How can I get the effect I want
here if I can't specify a width?


Rather, inline elements can't have a width, whereas block elements
can. Sorry.


No, O'Reilly is right.

The answer is to use <div> which defaults to block, or set display:block
for the <span> elements.

--
Spartanicus
Jul 20 '05 #3

P: n/a
Christopher Benson-Manica <at***@nospam.cyberspace.org> wrote:
http://ataru.gomen.org/files/html/files/test.html:
"The requested URL /files/html/files/test.html was not found on this
server."
<div id="listdiv">
<span class="left">Data:</span>
<span class="right">Value</span><br />
<span class="left">More data:</span>
<span class="right">Another value</span><br />
</div>
It looks like you are trying to simulate a table, as a data structure, in
CSS.
I'm trying to get span elements to align themselves in two columns,
like a table except cleaner.


It's ugly and dirty. If it's a table, use <table>. If not, tell us what
it is (preferably with a _real_ example), and we might discuss what's the
best approach.

If you intend to replace all HTML markup by div and span and CSS, you
have completely missed the point in Web authoring. But if you go along
such lines, you could just as well use div only, since you can make the
div vs. span distinction using the display property. Then again, I don't
see why you don't just as well use XML, where you could use tag names you
like, instead of the clumsy <div class="..."> syntax.

Hint: Before taking any of the above seriously, consider how your page
would work when CSS is disabled, or a user style sheet is used
exclusively, ignoring your author style sheet(s).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #4

P: n/a
"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in
comp.infosystems.www.authoring.stylesheets:
<span class="left">Data:</span>
<span class="right">Value</span><br />
<span class="left">More data:</span>
<span class="right">Another value</span><br />

I'm trying to get span elements to align themselves in two columns,
like a table except cleaner.


But why? You actually _have_ a table, with row headings <th> and row
values <td>. It is not "cleaner" in my opinion but _dirtier_ to
destroy that structure in favor of spans.

Maybe you've misunderstood he standard advice not to use tables for
layout? That's good advice, but when the data actually form a table,
<table> is the way to go.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #5

P: n/a
Stan Brown <th************@fastmail.fm> spoke thus:
Maybe you've misunderstood he standard advice not to use tables for
layout? That's good advice, but when the data actually form a table,
<table> is the way to go.


That could well be true :)

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 20 '05 #6

P: n/a
Jukka K. Korpela <jk******@cs.tut.fi> spoke thus:
"The requested URL /files/html/files/test.html was not found on this
server."
My regrettable mistake - it should have been /files/test.html.
It looks like you are trying to simulate a table, as a data structure, in
CSS.
Something like that...
It's ugly and dirty. If it's a table, use <table>. If not, tell us what
it is (preferably with a _real_ example), and we might discuss what's the
best approach.
I guess I'll just use a table. Thanks.
If you intend to replace all HTML markup by div and span and CSS, you
have completely missed the point in Web authoring.


Not *all*, just certain places. But the point is well taken.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.