[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4922
  • Last Modified:

How to make child DIV's "flow" from left -> right

I need to make a DIV that will hold child DIV's (see screencap)

Now my child DIV's always flow downwards, so there is only 1 DIV per line. How can I make the DIV's set up in a grid. So it fills out each row from left to right, then add's a new row etc.

The Children are added using JavaScript from a XML file, so I dont know the number of children.

I added both the HTML and the CSS

Hope someone will be able to help me quickly :-)

Cheers,
Mark
<?php
require_once("./inc/func.php");
 
$term = _g("term");
$term = strlen($term) > 0 ? $term : "021";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TRG Scanner Overvågning</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link type="text/css" href="theme/ui.all.css" rel="Stylesheet" />	
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.6rc6.js"></script>
<script type="text/javascript">
	
	function getDiv(id,headtxt,updatetxt)
	{
		return "<div class='scanner_portlet' id='scanner_portlet_"+ id +"'><div class='scanner_portlet_header' id='scanner_portlet_header_"+ id +"'>"+ headtxt +"</div><div class='scanner_portlet_opdateret' id='scanner_portlet_opdateret_"+ id +"'>"+ updatetxt +"</div></div>";
	}
	
	function getScannerList(update)
	{
		//$("#ajaxopdatering").html("<img src='images/ajax_wait.gif'>Opdaterer fra serveren...");
		$.ajax({
			type: "GET",
			url: "ajax/ajax.php?action=scanopdatering&term=<?php echo $term ?>&rnd="+ Math.random(),
			dataType: "xml",
			success: function(xml) {
				$(xml).find('scanner').each( function(){
					var $scanner = $(this);
					var id = $scanner.find('id').text();
					var headtxt = "Bil : "+ $scanner.find('bil').text() +" - Chauffør : "+ $scanner.find('chauf').text() ;
					var updatetxt = $scanner.find('minutes_since').text() ;
					if(!update){
						var newdiv = getDiv(id, headtxt, updatetxt )
						//$("#scanner_div").append( newdiv );
						$("#entry").append( newdiv );
					} else {
						if( $("#scanner_portlet_opdateret_"+ id).html() != updatetxt ){
							$("#scanner_portlet_opdateret_"+ id).html("<b>"+ updatetxt +"</b>");	
							setTimeout("$(\"#scanner_portlet_opdateret_"+ id +"\").html(\""+ updatetxt +"\")", 5000 );						
						}
					}
				});
				//$("#ajaxopdatering").html("");
			}			
		});
		
		setTimeout("updateScan()", 30000);
	}
	
	function updateScan()
	{
		getScannerList( true );
	}
 
	
</script>
</head>
<body onload="getScannerList(false);">
 
 
<div id="bg3">
	<div id="bg4">
		<div id="bg5">
			<div id="page">
				<div id="content">
					<div class="post">
						<div class="title">
							<h2><a href="#">Scan Scan Scan for helvede</a></h2>
							<p>10.14.08</p>
						</div>
						<div class="entry" id="entry">
						  
					  </div>
					</div>
				</div>
				<!-- end #content -->
			  <!-- end #sidebar -->
			  <div style="clear: both; height: 40px;">&nbsp;</div>
			</div>
			<!-- end #page -->
		</div>
	</div>
</div>
<!-- end #bg3 -->
<div id="footer">
	<p>&nbsp;</p>
</div>
<!-- end #footer -->
</body>
</html>
 
 
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	margin: 0px;
	background: #002F43 url(images/bg01.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B9B9B9;
}
 
h1, h2, h3 {
	margin-bottom: 1.5em;
}
 
h1 {
	font-size: 2em;
}
 
h2 {
	font-size: 1.4em;
}
 
h3 {
	font-size: 1em;
}
 
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 180%;
}
 
ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-left: 3em;
	margin-right: 3em;
}
 
a {
	color: #8AC800;
}
 
a:hover {
	text-decoration: none;
}
 
strong {
	color: #D7D7D7;
}
 
img.left {
	float: left;
	margin: 5px 25px 0px 0px;
}
 
img.right {
	float: right;
	margin: 5px 0px 0px 25px;
}
 
/* Background */
 
#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}
 
#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}
 
#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}
 
#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}
 
#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
}
 
/* Header */
 
#header {
	width: 900px;
	height: 145px;
	margin: 0px auto;
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	margin: 0px;
	padding: 70px 0px 0px 25px;
	font-size: 40px;
}
 
#header h1 sup {
	font-weight: normal;
}
 
#header h2 {
	float: right;
	margin: 0px;
	padding: 95px 25px 0px 0px;
	font-size: 14px;
}
 
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Header2 */
 
#header2 {
	width: 900px;
	height: 88px;
	margin: 0px auto;
}
 
/* Menu */
 
#menu {
	float: left;
}
 
#menu ul {
	margin: 0px;
	padding: 34px 0px 0px 0px;
	list-style: none;
	text-transform: lowercase;
}
 
#menu li {
	float: left;
}
 
#menu a {
	padding-left: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
 
/* Search */
 
#search {
	float: right;
}
 
#search form {
	margin: 0px;
	padding: 35px 80px 0px 0px;
}
 
#search fieldset {
	margin: 0px;
	padding: 0px;
	border: none;
}
 
#search input.text {
	width: 160px;
	background: none;
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #AEC38B;
}
 
#search input.button {
	display: none;
}
 
/* Page */
 
#page {
	width: 846px;
	margin: 0px auto;
	padding: 40px 0px 0px 0px;
}
 
/* Content */
 
#content {
	float: left;
	width: 783px;
}
 
.post {
}
 
.post .title {
	height: 49px;
	background: url(images/img02.gif) no-repeat;
}
 
.post .title h2 {
	float: left;
	padding: 12px 0px 0px 24px;
	font-size: 24px;
	text-transform: lowercase;
}
 
.post .title h2 a {
	text-decoration: none;
	color: #FFFFFF;
}
 
.post .title h2 a:hover {
	color: #8AC800;
}
 
.post .title p {
	float: right;
	padding: 12px 24px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color: #343434;
}
 
.post .entry {
	padding: 30px 23px 0px 23px;
}
 
.post .meta {
	height: 70px;
	clear: left;
	margin: 0px 23px;
	padding: 15px 0px 0px 0px;
	border-top: 1px solid #262626;
}
 
.post .meta .credit {
	float: left;
}
 
.post .meta .links {
	float: right;
}
 
.post .meta .links .more {
	padding-left: 17px;
	background: url(images/img05.gif) no-repeat left center;
}
 
.post .meta .links .comments {
	padding-left: 19px;
	background: url(images/img04.gif) no-repeat left center;
}
 
/* Sidebar */
 
#sidebar {
	float: right;
	width: 436px;
}
 
#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
#sidebar li {
	background: url(images/img03.gif) no-repeat;
	padding: 0px 23px 20px 23px;
}
 
#sidebar li ul {
}
 
#sidebar li li {
	padding: 8px 0px;
	background: none;
	border-bottom: 1px solid #262626;
}
 
#sidebar h2 {
	margin: 0px;
	padding: 16px 0px 30px 0px;
	text-transform: lowercase;
	font-size: 14px;
	color: #FFFFFF;
}
 
/* Footer */
 
#footer {
}
 
#footer p {
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	text-transform: lowercase;
	color: #566D77;
}
 
#footer a {
	color: #8097A1;
}
#scanner_div {
	width:230px;
 
}
 
.scanner_portlet {
	width:150px;
	height:50px;
	background-image:url('images/scanner_portlet_background.png');
	margin: 1em 0em 0em 0em;
	position:relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:10px;
	overflow:visible;
	padding-left: 25px;
}
 
.scanner_portlet_opdateret {
	font-style:italic;
	color:#CCCCCC;	
}

Open in new window

flow-div.jpg
0
trg_dk
Asked:
trg_dk
1 Solution
 
David S.Commented:
Give ".scanner_portlet" float:left
0
 
trg_dkAuthor Commented:
Some how that was just to easy :-)

Thanks
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

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