I have the following css code
.container {
width:800px;
background-color:yellow;
margin:auto;
display:table;
}
.cell {
float:left;
display:table-cell;
background-color:blue;
width:100px;
height:50px;
}
.middel{
background-color:purple;
height:100px;}
.wrong{
background-color:green;
}
and the following html code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" media="screen" href="grid.css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" >
</head>
<body>
<div class="container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell middel">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell wrong">9</div>
<div class="cell wrong">10</div>
<div class="cell wrong">11</div>
<div class="cell wrong">12</div>
<div class="cell">13</div>
<div class="cell">14</div>
<div class="cell">15</div>
<div class="cell">16</div>
</div>
</body>
</html>
this is a link to the html page and an image on how I want the layout to look and how it actually looks , its difficult to explain in words
example and image with the correct layout
how do I get the div’s after the purple div on the left side of the purple div and make the other ones flow to the right side?
in the end result you should be able to place the purple div anywhere between the other div’s and the flow should be the same.
hope I explained it clearly
thanks and greetings Mark,
Greetings Mark,
At the risk of offending purists, this looks like a job for tables! 😉 Using divs is more correct, but the implementation is FAR easier with tables. If you need more help with the code for a table, let me know and I should be able to whip something up pretty fast.