Solved

Page Layout Without tables

Posted on 2011-02-26
2
202 Views
Last Modified: 2012-05-11
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
Comment
Question by:Bob Schneider
2 Comments
 
LVL 1

Accepted Solution

by:
pmainardi earned 500 total points
ID: 34987743
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
 

Author Closing Comment

by:Bob Schneider
ID: 34988032
Wow!  Nice.  Thank you very much!
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Easy responsive table out of existing table 28 55
Bottom border change 5 15
ASP/VB email question 4 35
styling bootstrap grid system with CSS 2 6
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

809 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