creating a complex CSS layout

**code_nomad** · 11-09-2009, 05:20 AM

hello,

i am trying to create a 9 div structure that will be created dynamically. it supposed to be ordered in a way that the 1st div is beginning from the top left, and the fourth div will be created from the top left next to it and so on.

you can look in the attached sketch:

i tried to do it but what happens to me is that the divs is getting duplicated downwards and the 2nd row doesn't start from the top.

i would appreciate any help.

thanks.

**rdoyle720** · 11-09-2009, 01:06 PM

Well if the sections take up the same amount of space, it's easy enough. If you're trying to make 5 always line up with 2 no matter how long two is, that's going to be more of a problem.

Here's the easy one

Code:

<!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>Untitled Document</title>
<style type="text/css">
	.section {height: 100px; width: 100px; border: 1px solid black;}
	.column {float: left}
</style>

</head>

<body>

<div class="column">
	<div class="section">1</div>
    <div class="section">2</div>
    <div class="section">3</div>
</div>
<div class="column">
	<div class="section">4</div>
    <div class="section">5</div>
    <div class="section">6</div>
</div>
<div class="column">
	<div class="section">7</div>
    <div class="section">8</div>
    <div class="section">9</div>
</div>




</body>
</html>

Thread: creating a complex CSS layout

Thread Tools

Display

creating a complex CSS layout

Posting Permissions