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?

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

HTML Code:

<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

Code:

.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.

HTML Code:

    <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

Code:

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

Code:

<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!

Thread: Top-aligned 3-column "table"

Thread Tools

Search Thread

Top-aligned 3-column "table"

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions