Results 1 to 7 of 7

Thread: Top-aligned 3-column "table"

  1. #1
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Top-aligned 3-column "table"

    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.
    Last edited by Cronos; 04-07-2008 at 01:53 PM. Reason: image-comment

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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;}

  3. #3
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  5. #5
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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;
    
    		}

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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>

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

    Cronos (04-08-2008)

  8. #7
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •