...

View Full Version : tab/indent in CSS - NO tables



krycek
11-15-2002, 03:05 AM
OK, I am trying to do the following:


column one................column two
------------------------------------------
entry number one......entry two
entry three.................entry x


you see what I mean, I want the columns to align. Dead easy with a table... but using just CSS...? Hmmmm... Is it even possible???

I have tried using width and left properties, but this HAS to be an inline solution, and I want to avoid tables if possible!!!

Cheers :)

::] krycek [::

joh6nn
11-15-2002, 03:34 AM
have you tried using floats?

krycek
11-15-2002, 04:00 AM
yeah I guess I could do that...

by the way, I re-read what I put, and just to make it clear, setting the width property of each column does work, however, the wrapping goes weird.

::] krycek [::

krycek
11-15-2002, 04:09 AM
ok, done it... thanks john :)

a combination of width and float worked, except I have to use separate paragraphs instead of line breaks between rows now... probably better like that though :D

::] krycek [::

krycek
11-16-2002, 12:47 AM
Ok, so I said this was solved... it's NOT...

the text aligns for two lines, but then the next line wraps back again. like this:

sdfg...............sdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgdsfg
......................dfsgsdfgsdfgsdfgsdfgsdfgdsfgsdfgsdfg
dsgsdfgsdfgsdfgsdfgdsfgdfgdsgdsfgdsfgsdfgsdfgdfg
xcvbxcvbxcvbxcvbxcvb

where dots = space

any ideas, anyone? I need that straight left!

::] krycek [::

MCookie
11-16-2002, 01:11 AM
Try this, for a change:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
#main {
width:50%;
margin:10% 25%;
}
#left {
float:left;
width:49%;
border:1px solid #000;
}
#right {
float:right;
width:49%;
border:1px solid #000;
}
br.break {
clear:both;
}
-->
</style>
</head>
<body><div id="main">

<div id="left">
text left<br />
more text<br />
more<br />
text</div>

<div id="right">
I added the<br />
borders<br />
to show<br />
how<br />
it<br />
looks<br />
like</div><br class="break" />

</div>
</body>
</html>

krycek
11-16-2002, 01:48 AM
um I don't think that solves my problem.

perhaps I had better explain again.

I am trying to format some text, inline, like I would in a table.

So far I am using float left and width 150 to specify that the colum is 150px wide etc. etc.

column two needs to be open width.

here is some code:



.indent {
float: left;
width: 150px;
}

<p><span class="indent">column one text</span> lots and
lots and lots and lots and lots and lots and lots and lots and lots
and lots and lots and lots and lots and lots and lots and lots and
lots and lots and lots and lots and lots and lots and lots and lots
and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of text</p>


I need the second column to align its left side. The width needs to be automatically sizeable so I cannot set it to any property.

Ideas?

::] krycek [::

krycek
11-16-2002, 01:53 AM
hmmm, looks as if i was nearly there.

by setting a second class for the rightmost column and telling it to be 100% wide, it worked fine. :)

::] krycek [::



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum