?
Solved

Page Layout Without tables

Posted on 2011-02-26
2
Medium Priority
?
207 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

777 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