Multiple blocks on the same "line"

Hi,

I'm writing a "dynamic" page. It will be changed from JavaScript. And I
would like the structure to be quite simple because of that.

I was planning to NOT use tables, but to my big surprise, I am not able to
figure out how to stack multiple (unknown number of) blocks on the same
line.

My criteria are:
1. All block must be on same "line"
2. Block may contain several "lines"
3. Lines within a block must not wrap
4. Must not use absolute values. %-values are ok, but I fail to see how they
could be used.
5. Does not have to be overly well behaved if somebody uses a tiny tiny
browser window.

And I'd also like a label floated all the way out to the right.

And I'd like it to work with Opera 7, IE6 and maybe Firefox. Reasonably
fresh browser versions. Preferably without any CSS hacks. It does not have
to look exactly the same, close enough is good enough. :-)

I have attached a two-in-one example. The first is my attempt without tables
as a starting point for your suggested changes. The second is what I would
like it to look like.

The coloring is just to show what is what in the browser. The final version
will use classes. All the boxes will not have the same style.

Thanks in advance,
	-Jonte

--8<---
<body>
<div style="width : 80%; margin : 0px auto; border : 1px solid blue;
text-align : left;">
	<span style="color : red; border : 1px solid red;">
		String 1
	</span>
    	<span style="color : green; border : 1px solid green;">
		Unknown length string 2
	</span>
	<span style="border : 1px solid black;">
		line1, line2
	</span>
	<span style="float : right; border : 1px solid blue;">
		Rightfloat, top aligned
	</span>
</div>
<br/>
<div style="width : 80%; margin : 0px auto; border : 1px solid blue;
text-align : left;">
	<span style="float : right; border : 1px solid blue;">
		Rightfloat, top aligned
	</span>
	<table>
		<tr>
			<td style="color : red; border : 1px solid red;">
				String 1
			</td>
			<td style="color : green; border : 1px solid
green;">
				Unknown length string 2
			</td>
			<td style="border : 1px solid black;">
				<div>line1</div><div>line2</div>
			</td>
		</tr>
	</table>
</div>
</body>

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Multiple blocks on the same "line"

Sent by Jon_Wickström on 2 January 2005 04:04

Message thread: