How to set size for divs with different parents
Posted
by user340524
on Stack Overflow
See other posts from Stack Overflow
or by user340524
Published on 2010-05-13T17:21:20Z
Indexed on
2010/05/13
17:24 UTC
Read the original article
Hit count: 136
I want to create a div layout which is similiar to the following table result:
<html>
<head>
<title>Basic</title>
<style>
table { border: 1px solid;}
</style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<td> Asia</td>
<td>
<table>
<tr>
<td>South Asia</td>
</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>Singapore</td></tr>
<tr><td>India</td></tr>
</table></td>
</tr>
<tr>
<td>Monarchy</td>
<td><table>
<tr><td>Bhutan</td></tr>
<tr><td>Nepal</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>East Asia</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>China</td></tr>
<tr><td>South Corea</td></tr>
</table></td>
</tr>
<tr>
<td>Constitutional Monarchy</td>
<td><table>
<tr><td>something</td></tr>
<tr><td>Japan</td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I managed to replicate this with some effort. The problem is that I want the names of the countries to be in a column or if you will - the containers for the government types to be the same width so other containers will align.
If I don't do it in nested containers (in the example - nested tables) the rows will get displaced. Currently rows are shown exactly how I want them - the text is in the vertical middle of the what they refer to.
Only thing that comes up to my mind is to set the text in the same columns as class=column1, class=column2, etc. and then somehow define the width for the column classes. Problem is the data is defined dynamically and I can't say how much pixels or % of the page I can give to a column, I just need it to stretch with the text.
This is my first time I ask about help here so if I am doing it wrong, tell me how do improve my inquiry.
© Stack Overflow or respective owner
