Width of span elements

Christopher Benson-Manica

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

Subscribe Post Reply

135195

Christopher Benson-Manica

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

Spartanicus

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

Jukka K. Korpela

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

Stan Brown

"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

Christopher Benson-Manica

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

Christopher Benson-Manica

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

by: delerious | last post by:

I am noticing that Mozilla does not include an element's padding when calculating its width. IE and Opera do. Who is correct?

HTML / CSS

IE6 won't hide dynamically created span elements

by: Nicholas Couch | last post by:

I have a little form with a couple of dynamically generated list boxes. When the user makes a selection from the first box, the second box is refreshed. When they make a selection from the second...

Javascript

(DOM)Compute the sum of width of elements contained in blockleve element

by: Luke Matuszewski | last post by:

Hi. I know that it is hard problem (as hard as CSS and HTML layouting rules apply), but maybe someone has some code or idea how to start it. For now i know i will cssQuery: ...

Javascript

MSIE Does Not Do OnMouseXXX Events On Span Elements?

by: mavigozler | last post by:

IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. ...

Javascript

forcing SPAN elements together in a single row

by: Ted Zlatanov | last post by:

Hello, my problem is very simple. I have: <div id="enclosing"> <div id="d1"> <span id="s1">S1</span> <span id="s2">S2</span> <span id="s3">S3</span> </div>

HTML / CSS

HTML parsing errors with rdfa in Common Tag span elements?

by: lcurlr | last post by:

I have been trying to get my HTML pages all up to a common standard and I am now at a point where the only parsing errors are in Amaya. Amaya rejects the Common Tag attributes in span elements...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Width of span elements

Similar topics