Top-aligned 3-column "table" [Archive]

View Full Version : Top-aligned 3-column "table"

Cronos

04-07-2008, 12:39 PM

Sirs,

I want to make a 2 column "table" with CSS.
The idea is that the left cell is an input box (text), and the right cell is the target area which will be populated by entered text (and dynamically expanding vertically). These two must be top-aligned.

Now, the problem comes when I want to have another duple below. If the left cell above expands dynamically, how can I know where to place the next duple?
http://img149.imageshack.us/img149/5757/cssta1oo8.th.png (http://img149.imageshack.us/my.php?image=cssta1oo8.png)

The left cells are input areas and the right cells are target areas. Left1 belongs to right1 etc... And these must be top-aligned. AND the Right-cells expand vertically as they are populated.
I've tried with DIV, but the left cell pushes down the right cell (as I understand DIV takes up one line of the page).
Do I have to change to SPAN or what?
Thanks.

I will try and upload an image when I get back home.

Medyman

04-07-2008, 01:14 PM

Hmm...I'd suggest that you get rid of the table altogether. They're just trouble. If you only use divs, it shouldn't be a problem. You can just stack divs.

HTML

<div id="first">
<div class="input">
<input type="text" value="Left 1">
</div>
<div class="output">
Right 1
</div>
<br style="clear:both;">
</div>

CSS

.input { width:49%; float:left;}
.output { width:49%; float:right;}

Cronos

04-07-2008, 06:13 PM

Thanks. This is one step on the way. Yes, it's DIV I want to use.
I've tried with a couple of rows.

http://i29.tinypic.com/b4uh36.png
Seems ok, but they're too tight.
So I've tried adding "padding: 5px" and now I'm back to before.

http://i30.tinypic.com/287zthd.png
Here the left cell overtakes the right. I want them to be top-aligned.
It's also scary that the design breaks once I start fiddling with it.
Should I go for a different solution?

Medyman

04-07-2008, 08:00 PM

Can you post the markup/CSS that you're using? You mentioned cells again, are you using this within tables??

What I gave does work, if implemented correctly.

Cronos

04-07-2008, 09:40 PM

This is what I use.

<body>
<div id="first">
<div class="input">
<input type="text" value="Left 1">
</div>

<div class="output">
Right 1
</div>
<br style="clear:both;">
</div>
<div id="second">
<div class="input">
<input type="text" value="Left 2">
</div>

<div class="output">
Right 2
</div>
<br style="clear:both;">
</div>
</body>

CSS

body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
.input { width:49%; float:left;
}
.output {
width:49%;
float:right;
border:1px solid;

}

Medyman

04-07-2008, 10:35 PM

<html>
<head>
<style type="text/css">
html,body
{
font-family:arial,helvetica,sans-serif;
font-size:12px;
width:100%;
}
.row {
clear:both;
margin:0 0 5px 0;
}
.input
{
width:49%;
float:left;
}
.output
{
width:49%;
float:right;
border:1px solid #000;
}
.clear { clear:both; }
</style>
</head>
<body>

<div id="first" class="row">
<div class="input">
<input type="text" value="Left 1">
</div>
<div class="output">
Right 1
</div>
<br class="clear">
</div>

<div id="second" class="row">
<div class="input">
<input type="text" value="Left 2">
</div>
<div class="output">
Right 2
</div>
<br class="clear">
</div>

<div id="third" class="row">
<div class="input">
<input type="text" value="Left 3">
</div>
<div class="output">
Right 3
</div>
<br class="clear">
</div>

</body>
</html>

Cronos

04-08-2008, 08:42 PM

Right-O!
This looks very good! I'll play with it and see if it holds my bad amendments.
Thanks a lot!