Solved

Page Layout Without tables

Posted on 2011-02-26
2
199 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
Comment Utility
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
Comment Utility
Wow!  Nice.  Thank you very much!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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 …

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now