Solved

How to simulate table layout via css

Posted on 2008-06-15
13
1,033 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:cubrovic
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +1
13 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21788902
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

0
 
LVL 14

Expert Comment

by:Ali Kayahan
ID: 21788903
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>
0
 
LVL 3

Expert Comment

by:Fapiko
ID: 21788928
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

0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 7

Author Comment

by:cubrovic
ID: 21788966
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

0
 
LVL 14

Expert Comment

by:Ali Kayahan
ID: 21788996
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>
0
 
LVL 82

Expert Comment

by:hielo
ID: 21789030
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

0
 
LVL 3

Accepted Solution

by:
Fapiko earned 170 total points
ID: 21789046
In order to make the divs line up height-wise you are going to have to do:

 original
 translation
 original
 translation

If you just do:
 original
 original
 original
 translation
 translation
 translation
there is no way to make the css line up the first translation with the first piece of original text. The way any solution you're going to get will work is by floating the div or setting its display to inline, which makes the one after it show up next to it. The only other thing I can think of is to add javascript that changes the order of the divs after the page has loaded, but from how you described the problem it doesn't sound like you can use javascript in this application.
0
 
LVL 82

Expert Comment

by:hielo
ID: 21789080
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>
0
 
LVL 7

Author Comment

by:cubrovic
ID: 21789251
No can do :(

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

Assisted Solution

by:hielo
hielo earned 170 total points
ID: 21789269
the "table" I posted above(ID:21789030) combined with this:
<style type="text/css">
 .myfaketable{width:100%;}
 .col{display:block;clear:both;}
 .pan{float:left;margin:4px;display:inline;width:19%;}
 </style>

worked fine for me. Perhaps the sum of your percentages are off. Save the example below as test.html and try it:
<style type="text/css">
 .myfaketable{width:100%;}
 .col{display:block;clear:both;}
 .pan{float:left;margin:4px;display:inline;width:19%;}
 </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 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>

Open in new window

0
 
LVL 14

Assisted Solution

by:Ali Kayahan
Ali Kayahan earned 160 total points
ID: 21789272
cubrovic; Did you try the that i post ?
0
 
LVL 7

Author Comment

by:cubrovic
ID: 21790630
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.
0
 
LVL 7

Author Comment

by:cubrovic
ID: 21807331
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.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question