Div as a column layout

**YuriKolovsky** · Dec 2, 2012 15:18

Hello, I'm having trouble achieving a table like fluid CSS layout, what I need to achieve is to imitate this table layout

HTML Code:

<table>
<tr><td>Some text of varied length 1A</td><td>Some text of varied length 1B</td></tr>
<tr><td>Some text of varied length 2A</td><td>Some text of varied length 2B</td></tr>
<tr><td>Some text of varied length 3A</td><td>Some text of varied length 3B</td></tr>
</table>

using this HTML

HTML Code:

<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B</p>
<p>Some text of varied length 3B</p>
</div>
</div>

and any CSS, even if it's CSS3, including crazy hacking CSS if necessary, but no javascript or CSS expressions.
I've been huffing and puffing all day now and am wondering if any of your folks are willing to at least tell me if it's possible to achieve this or not.

**ralph.m** · Dec 2, 2012 15:58

Would this do it, or am I missing something?

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
	
<style media="all">
.multicol {display:table;}
.colA, .colB {display:table-cell;}
</style>
	
</head>

<body>

<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B</p>
<p>Some text of varied length 3B</p>
</div>
</div>
</body>

</html>

**ronpat** · Dec 3, 2012 01:40

Interesting challenge.
You said fluid layout. By nature, tables are great fluid containers.
Tables are constructed by row, then by column (columns are inside rows) just like your table example shows.
However, the css markup is arranged by column, then by row (rows are inside columns). Different animals.
The css markup will not work like a table with 3 rows and 2 columns because the "columns" are not paired in rows.
The difference is obvious when the table code is rewritten as shown below.
I don't think the solution you are seeking is possible. But I'm just a novice

Table code rearranged:

Code:

<table>
    <tr>
        <td>Some text of varied length 1A</td>
        <td>Some text of varied length 1B</td>
    </tr>
    <tr>
        <td>Some text of varied length 2A</td>
        <td>Some text of varied length 2B</td>
    </tr>
    <tr>
        <td>Some text of varied length 3A</td>
        <td>Some text of varied length 3B</td>
    </tr>
</table>

Same css code:

Code:

<div class="multicol">
    <div class="colA">
        <p>Some text of varied length 1A</p>
        <p>Some text of varied length 2A</p>
        <p>Some text of varied length 3A</p>
    </div>
    <div class="colB">
        <p>Some text of varied length 1B</p>
        <p>Some text of varied length 2B</p>
        <p>Some text of varied length 3B</p>
    </div>
</div>

**YuriKolovsky** · Dec 3, 2012 02:01

Thank you for the reply ralph!
Yeah, the p's need to be vertically lined up like they would be for a table, for example look at this

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
	
<style media="all">
.multicol {display:table;width:300px}
.colA, .colB {display:table-cell;}
p {
	border:solid #000 1px;
}
</style>
	
</head>

<body>

<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length</p>
<p>Some text of varied length 3B</p>
</div>
</div>
</body>

</html>

so that it looks like this

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
	
<style media="all">
table {
	width:300px;
}
table td {
	border:solid #000 1px;
}
</style>
	
</head>

<body>

<table>
<tr><td>Some text of varied length 1A</td><td>Some text of varied length 1B</td></tr>
<tr><td>Some text of varied length 2A</td><td>Some text of varied length 2B
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length</td></tr>
<tr><td>Some text of varied length 3A</td><td>Some text of varied length 3B</td></tr>
</table>
</body>

</html>

**ralph.m** · Dec 3, 2012 02:22

Ah yes, I see. Hmm, definitely a job for PMOB.

**YuriKolovsky** · Dec 3, 2012 12:18

@ronpat thank you, it is interesting and difficult to accomplish, if it is possible.
@ralph I sent a message to Paul, lets see if he has the time to help out.

**Paul O'B** · Dec 6, 2012 03:49

Hi Timo,

Ronpat hit the nail on the head and you'd need to use the same html structure as the table because the p elements in your cell bear no relationship to the p elements in the other cell unless they are paired in a table-row structure. If you can't change the html then I don't think it can be done.

You can equally distribute the elements in each column but that's not the same as them aligning with each other.

e.g.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
<style media="all">
.multicol {
	display:table;
	width:300px
}
.colA, .colB {
	display:table-cell;
	vertical-align:middle;
	padding: 0 5px
}
p {
	border:solid #000 1px;
	margin:3em 0;
}
</style>
</head>

<body>
<div class="multicol">
		<div class="colA">
				<p>Some text of varied length 1A</p>
				<p>Some text of varied length 2A</p>
				<p>Some text of varied length 3A</p>
		</div>
		<div class="colB">
				<p>Some text of varied length 1B</p>
				<p>Some text of varied length 2B
						Some text of varied length
						Some text of varied length
						Some text of varied length
						Some text of varied length
						Some text of varied length</p>
				<p>Some text of varied length 3B</p>
		</div>
</div>
</body>
</html>

That only works because the content just happens to almost match.

**YuriKolovsky** · Dec 6, 2012 11:42

@Paul
thanks a lot for replying, I figured it was impossible. Although now that "impossible" is mentioned I begin to get ideas, for example I wonder if it's possible to achieve this without changing the html using the experimental flex-box model, what do you think?

**Paul O'B** · Dec 6, 2012 12:16

Originally Posted by YuriKolovsky

@Paul
thanks a lot for replying, I figured it was impossible. Although now that "impossible" is mentioned I begin to get ideas, for example I wonder if it's possible to achieve this without changing the html using the experimental flex-box model, what do you think?

I haven't played around with flexbox (because the spec keeps changing) but it looks like it can do some clever things. I'd still hazard a guess that you would need to change the html around though to create a relationship between those elements.

User Tag List

Thread: Div as a column layout

Thread Tools

Display

Div as a column layout

Bookmarks

Bookmarks

Posting Permissions