Solved

Page Layout Without tables

Posted on 2011-02-26
2
204 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 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