asked on

How to simulate table layout via css

How can I simulate table layout via css (at least in IE6+ and firefox)

What I have is original text and translation side by side (of course more complicated then the example below:) )
I need to put it separetly into html so I cant use table (for several reseaons)
but I need to have table like layout so the n-th paragraph of the original text is in the same line with the n-th paragraph of translation.

Paragraph are a lot bigger then this in example and can have several rows so I cant define height of paragraphs cause this have to be flexible.

I cant do that dinamically so my only option is some css solution.
Can someone help me on this?

Thanks in advance, Danilo

I need this:
 
<div class="myfaketable">
	<div class="col1">
		<p>one</p>
		<p>two</p>
		<p>three</p>
	</div>
	<div class="col2">
		<p>uno</p>
		<p>due</p>
		<p>tre</p>
	</div>
</div>
 
to be rendered same as:
 
<table>
	<tr>
		<td>one</td>
		<td>uno</td>
	</tr>
	<tr>
		<td>two</td>
		<td>due</td>
	</tr>
	<tr>
		<td>three</td>
		<td>tre</td>
	</tr>
</table>

Open in new window

hielo

Try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
  <head>
    <title>Untitled</title>
    <style type="text/css">
<!--
.c1 {
  clear:both;
} 
.c2 {
  float:left;width:50%;
} 
.c3 {
  float:left;width:49%;border-left:1px solid #000000;
} 
.c4 {
  border-top:1px solid #000000;clear:both;
} 
.c5 {
  border:1px solid #000000;
} 
-->
    </style>
  </head>
  <body> 
    <div class="c5">
      <div class="c1">
        <div class="c2">One</div>
        <div class="c3">1</div>
      </div>
      <div class="c4">
        <div class="c2">Two</div>
        <div class="c3">2</div>
      </div>
      <div class="c4">
        <div class="c2">Three</div>
        <div class="c3">3</div>
      </div>
      <div class="c4">
        <div class="c2">Four</div>
        <div class="c3">4</div>
      </div>
      <div class="c4">
        <div class="c2">Five</div>
        <div class="c3">5</div>
      </div>
      <div class="c1"><!-- --></div>
    </div> 
  </body>
</html>

Open in new window

Ali Kayahan

I need this:
<style type="text/css">
.myfaketable{width:80px;}
.col1{display:block}
.col2{display:block}
.pan{float:left;margin:4px;display:inline;}
</style>
<div class="myfaketable">
      <div class="col1">
            <div class="pan">one</div>
            <div class="pan">two</div>
            <div class="pan">three</div>
      </div>
      <div class="col2">
            <div class="pan">uno</div>
            <div class="pan">due</div>
            <div class="pan">tre</div>
      </div>
</div>

to be rendered same as:

<table>
      <tr>
            <td>one</td>
            <td>uno</td>
      </tr>
      <tr>
            <td>two</td>
            <td>due</td>
      </tr>
      <tr>
            <td>three</td>
            <td>tre</td>
      </tr>
</table>

Fapiko

I'm hoping that this is what you're looking for. You'll have to adjust the width in the CSS to meet the application but this should do the trick.

<style type="text/css">
.myfaketable { width: 120px; }
.left { float: left; }
.right {float: right; }
.left, .right {  width: 60px; }
br { clear: both; }
</style>
<div class="myfaketable">
	<div class="left">one</div>
	<div class="right">
		uno<br />
		uno<br />
		uno
	</div>
	<br />
	<div class="left">two</div>
	<div class="right">due</div>
	<br />
	<div class="left">three</div>
	<div class="right">
		tre<br />
		tre<br />
		tre<br />
		tre tre tre<br />
		tre
	</div>
	<br />
</div>
 
to be rendered same as:
 
<table>
        <tr>
                <td>one</td>
                <td>uno</td>
        </tr>
        <tr>
                <td>two</td>
                <td>due</td>
        </tr>
        <tr>
                <td>three</td>
                <td>tre</td>
        </tr>
</table>

Open in new window

cubrovic

ASKER

First of all I would like to thank you for fast response on sunday :)
hielo;s and Fapiko's solutions doesn't work for me cause they mix original text and translation and that is something I can't do :(

ali_kayahan solution works and preserve separation of original and translation but this solution work only for this shortened example and I couldn't extended (so far) to works with more data like in snippet below.
Kind of a width thing seems to me but so far no lack.

But I'm afraid even if the width thing can be fixed that height thing will remain problems because of the different heights of paragraphas (and number of them could be up to 100 maybe)

Any suggestion?

<div class="myfaketable">
      <div class="col1">
            <div class="pan">one</div>
            <div class="pan">two</div>
            <div class="pan">three</div>
			<div class="pan">three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three </div>
			<div class="pan">some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some </div>            
      </div>
      <div class="col2">
            <div class="pan">uno</div>
            <div class="pan">due</div>
            <div class="pan">tre</div>
			<div class="pan">tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre </div>
			<div class="pan">somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore </div>            
      </div>
</div>

Open in new window

Ali Kayahan

The one below should work regardless to width , and can you please be more specific what you mean by height issue?

<style type="text/css">
.myfaketable{}
.col{display:block;float:left;clear:left}
.pan{float:left;margin:4px;display:inline;}
</style>
<div class="myfaketable">
<div class="col">
<div class="pan">one</div>
<div class="pan">two</div>
</div>
<div class="col">
<div class="pan">three</div>
<div class="pan">uno</div>
</div>
<div class="col">
<div class="pan">due</div>
<div class="pan">tre</div>
</div>
</div>

hielo

Try this:

<style type="text/css">
 .myfaketable{}
 .col{display:block;clear:both;}
 .pan{float:left;margin:4px;display:inline;width:100px;}
 </style>
<div class="myfaketable">
      <div class="col">
            <div class="pan">one</div>
            <div class="pan">two</div>
            <div class="pan">three</div>
            <div class="pan">three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three </div>
            <div class="pan">some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some some </div>            
      </div>
      <div class="col">
            <div class="pan">uno</div>
            <div class="pan">due</div>
            <div class="pan">tre</div>
            <div class="pan">tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre tre </div>
            <div class="pan">somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore somemore </div>            
      </div>
</div>

Open in new window

ASKER CERTIFIED SOLUTION

Fapiko

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

hielo

From my last post, you can also try expressing the overall width in percentages:
<style type="text/css">
.myfaketable{width:100%;}
.col{display:block;clear:both;}
.pan{float:left;margin:4px;display:inline;width:19%;}
</style>

cubrovic

ASKER

No can do :(

As soon as I specify width things started to be messy.

SOLUTION

hielo

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

Ali Kayahan

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

cubrovic

ASKER

Sorry I had kind of an emergency so I had to pause work on this but I will try your examples and respond first thing tomorrow.
Thanks for effort. I appreciated it very much.

cubrovic

ASKER

Guys sorry for delay.
Thanks for all solutions you posted but neither one of tthis dont work for me :(.
Not even if I dont insist on height issue that Fapiko talk about (and I have to satisfy that condition too :( )

Javascript solution will be my cup of tea (I was in my collegue years in top ten javascript coders here ;) )
but I cant do that.

I can do server side processing in java but this solve only half of my problem (internet users) but I still had problem for non server users (editorial board)

Thanks for all help and I will split points for effort if thats ok with you guys.