Is CSS capable of getting the result as in the screenshot. A block is a white multi form element. Block element heights are variable. Block width is fixed.
Please just upload it to tinypic or photobucket and post a direct link to it here (obscure the link to avoid the spam filter)
Otherwise we have to wait for it to be approved. 
try this bit.ly link
bit.ly/bAaL63
If the block heights are dynamic then it could always break. You would need JS to make sure it is completely stable.
The question I want to know is, why in the world would you want that kind of layout? I could sorta see a potential page in there, but there are just too many overlaps to consider building a page like that.
Hi,
As Ryan said I can’t see how that would work for an actual layout. I’d need to see that image populated with the content that you are going to use as at present it doesn’t really make much sense to me.
Layouts are seldom blocks arranged like that although many designers think they can be.
Do you have an image of what the site would look like with content inside and then perhaps we could be more helpful?
This is still at a photoshop stage. The idea is to generate different layouts by passing a grid like this:
1111
ABCC
BBCD
EFFD
GHFD
GGII
–I-
Imagining text flowing inside the blocks is the best I can do for now. Perhaps sticking to fixed heights makes it possible.
Making fixed heights would be possibe, but content would overflow unless you use scrollbars in each box, which would look quite nasty IMHO
Yes, it’s not really a feasible design but if you have a PSd you can show us we could offer some ways of going about it.
You could code it all with fixed heights but it would break at the earliest opportunity. I have never come across a site designed like that and I code about 3 or 4 new ones every week.
You could float everything but it would be very fragile…
This is just a rough mock up but is only working in Firefox and broken everywhere else.
<!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>
html, body {
margin:0;
padding:0
}
body {
padding:20px 0;
background:#ebebeb
}
h1, p {
margin:0 0 .9em;
padding:5px;
line-height:1.4;
}
#outer {
width:964px;
margin:auto;
border-bottom:none;
}
.block1, .block2, .block3, .block4, .block5, .block6, .block7, .block8 {
background:#fff;
}
#header {
border:5px solid #bfbfbf;
min-height:295px;
background:#fff;
}
* html #header {
height:295px
}
.block1 {
width:470px;
border-right:5px solid #bfbfbf;
border-bottom:5px solid #bfbfbf;
border-left:5px solid #bfbfbf;
min-height:297px;
float:left;
margin-right:4px;
}
.block2 {
border-bottom:5px solid #bfbfbf;
border-right:5px solid #bfbfbf;
min-height:290px;
}
* html .block1, * html .block2 {
height:290px
}
.block1a {
width:228px;
min-height:141px;
border-right:5px solid #bfbfbf;
border-bottom:5px solid #bfbfbf;
float:left;
}
* html .block1a {
height:141px;
}
.b3spacer, .b5spacer {
float:right;
width:1px;
height:140px;
}
.b5spacer {
float:left;
height:162px
}
.block3 {
float:right;
clear:right;
min-height:443px;
border:5px solid #bfbfbf;
border-right:none;
width:233px;
border-right:5px solid #bfbfbf;
margin-right:-5px;
}
* html .block3 {
height:443px;
}
.block4 {
width:235px;
min-height:138px;
float:left;
border-bottom:5px solid #bfbfbf;
border-left:5px solid #bfbfbf;
}
* html .block4 {
height:138px;
}
.block5 {
width:476px;
min-height:286px;
float:right;
border-left:5px solid #bfbfbf;
border-bottom:5px solid #bfbfbf;
}
* html .block5 {
height:286px
}
.block5a {
width:228px;
height:121px;
border-top:5px solid #bfbfbf;
border-right:5px solid #bfbfbf;
float:left;
clear:left;
}
.block6 {
min-height:350px;
border-bottom:5px solid #bfbfbf;
width:468px;
border-left:5px solid #bfbfbf;
}
* html .block6 {
height:350px
}
.block7 {
float:right;
width:481px;
min-height:298px;
border-left:5px solid #bfbfbf;
border-bottom:5px solid #bfbfbf;
border-right:5px solid #bfbfbf;
}
* html .block7 {
height:298px;
}
.block8 {
width:232px;
height:146px;
background:#ebebeb;
float:right;
clear:right;
border-top:5px solid #bfbfbf;
border-left:5px solid #bfbfbf;
border-bottom:5px solid #ebebeb;
right:-5px;
top:8px;
position:relative;
z-index:99;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \\*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide */
</style>
</head>
<body>
<div id="outer" class="clearfix">
<div id="header">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
</div>
<div class="block1">
<div class="block1a">
<p>Block 1a</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.,</p>
</div>
<p>block1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
</div>
<div class="block2">
<div class="b3spacer"></div>
<div class="block3">
<p>block3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
</div>
<p>block2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="block4">
<p>Block4</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, </p>
</div>
<div class="block5">
<div class="b5spacer"></div>
<div class="block5a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, solli</p>
</div>
<p>Block5</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, .</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="block7">
<div class="b3spacer"></div>
<div class="block8"></div>
<p>Block7</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat</p>
</div>
<div class="block6">
<p>Block6</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, </p>
</div>
</div>
</body>
</html>