• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

Page Layout Without tables

I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, the bottom row of divs i want to adjust their tops accordingly, unlike rows in a table.

Thank you very much!
0
Bob Schneider
Asked:
Bob Schneider
1 Solution
 
pmainardiCommented:
Hope this helps,

cheers

--------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title></title>
	<style>
	/*Table like*/
	
	.main_container{
	width:830px;
	padding: 5px;
	border-style:dotted;
    border-width:1px;
    border-color: #000000;
	margin-bottom: 5px;	
	}
	
	.one_set{
	width:812px;
	height: 250px;
	border-style:dotted;
    border-width:1px;
    border-color: #cc0000;
	}
	
    .data{
	width:200px;
	margin-right:3px;
	float:left;
	}
	.clear { /* this is needed to keep the colums in place */
	clear:both;
	height:20px;
	}
	
	/*not table like*/
	
	.container{
	width:820;
	}
	
	.column{
	width:200px;
	margin-right:3px;
	float:left;
	border-style:dotted;
    border-width:1px;
    border-color: #cc0000;
	}
	
	.column_data{
	}
	
	</style>	
	</head>
	
	<body>
	
	<!-- Table like -->
    <div class='main_container'>
	
	<br /><h2>Table like</h2>
	<p>You make an external container for each group of four columns, put 4 columns in it then fill them with data and repeat</p>
	
	
	<div class='one_set'>
	<div class='data'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data. 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process. 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, the bottom row of divs i want to adjust their tops accordingly, unlike rows in a table.
	</div>
	</div>
   
	
    <div class='clear'></div>
	
	<div class='one_set'>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data. 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process. 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, the bottom row of divs i want to adjust their tops accordingly, unlike rows in a table.
	</div>
	</div>
 
	
    <div class='clear'></div>	
	
	<div class='one_set'>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data. 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process. 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, 
	</div>
	<div class='data'>
	I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  The problem is that, due to the varying heights of the top divs, the bottom row of divs i want to adjust their tops accordingly, unlike rows in a table.
	</div>
    </div>
	
    <div class='clear'></div>	
	
	</div>
	<!-- end Table like -->
	
	
	
	<!-- not  Table like -->
	 <div class='main_container'>
	
    <h2>Not table like</h2>
	<p>You make a container in which you have four columns independently flowing and fill each one as you please</p>
	<div class='container'>
	
	<!-- set of four -->
	
	<!-- firstColumn -->
	<div class='column' style='background-color: #b8b8b8;'>
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	</div>
	<!-- end firstColumn -->
	
	
	<!-- secondColumn -->
	<div class='column' style='background-color: #b8b8b8;'>
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	
	</div>
	<!-- close column_data -->
	
	<div class='column_data'  style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
		
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data' >
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay 
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	</div>
	<!-- end secondColumn -->
	
	<!-- thirdColumn -->
	<div class='column' style='background-color: #b8b8b8;'>
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	</div>
	<!-- end thirdColumn -->
	
	<!-- fourthColumn -->
	<div class='column' style='background-color: #b8b8b8;'>
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	
	</div>
	<!-- close column_data -->
	
	<div class='column_data'  style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
		
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data' >
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  Below that I want to repeat that process.  
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	<div class='column_data' style='background-color: #c8c8c8;'>
	1. I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  
	
	2.I want to lay out a table that has four divs of 200px across that are dynamically populated with data.  They will be of varying heights.  
	
	3.I want to lay 
	
	4. Below that I want to repeat that process. 
	</div>
	<!-- close column_data -->
	
	</div>
	<!-- end fourthColumn -->
	
	
	
	
	<!-- END set of four -->
	
	
	<!---->
	<div class='clear'></div>
	
	
	
	<!-- close container -->
	</div>
	</div>
	
	</body>
</html>

Open in new window

0
 
Bob SchneiderCo-OwnerAuthor Commented:
Wow!  Nice.  Thank you very much!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now