Hi folks.
Overview:
I'm trying to create a relatively simple page layout detailed below and running into problems no matter how I try to approach it.
Concept:
- A standard-size-block layout. I'll quote unit widths: each content block is 240px square with 5px of margin around it.
- A left column of fixed width of 1 unit (245px - 1 block + margin to left). No problems here.
- A right column of variable width to fill the remaining space. No problems here either.
- In the left column, a number of 1unit x 1unit blocks fixed down the column. Also some blank space at the top - again, not a problem.
- In the right column: a number of free-floating blocks of standard unit-sizes which float around and fill the space given to them by the browser window. No problems here.
- Lastly, a single element, 2 units wide, which sits half in the left column and half in the right column, and which the blocks in the right column still float around. Here be dragons.
Please see here for a diagram: http://is.gd/bPUGI
Problem:
No matter how I approach this, it goes wrong. Below is code for my existing attempt at a solution. My current problem is that the 1x1 blocks on the right do not respect the 2x1 block, and as a result half of the 2x1 block is overwritten by a 1x1 block in the right-hand column.
I'm aware that this is almost certainly an issue with position: absolute taking things out of flow. However, can't really find a way round that which doesn't just throw up another problem instead.
Code:
<html>
<head>
<title>wat</title>
<style type="text/css">
body {
background: #ccc;
color: #000;
padding: 0px 5px 5px 0px;
margin: 0px;
}
#leftcol {
width: 245px;
margin-top: 490px;
position: absolute;
}
#rightcol {
left: 245px;
position: absolute;
}
#bigblock {
float: left;
position: relative;
margin-top: -240px;
background: red;
}
.cblock {
margin: 5px 0px 0px 5px;
float: left;
overflow: hidden;
display: block;
background: #fff;
}
.w1 {
width: 240px;
}
.w2 {
width: 485px;
}
.l1 {
height: 240px;
}
</head>
<body>
<div class="cblock w2 l1" id="bigblock">
<h1>DRAGONS</h1>
<p>Here be they</p>
</div>
<div id="leftcol">
<div class="cblock w1 l1">
<h1>Left 1</h1>
<p>1x1 block</p>
</div>
</div>
<div id="rightcol">
<div class="cblock w1 l1">
<h1>Right 1</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 2</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 3</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 4</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 5</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 6</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 7</h1>
<p>1x1 block</p>
</div>
</div>
</body>
</html>
Constraints:
One final note that I need cross-browser compatibility, though I'm more than happy to enforce this with JS if necessary. That said, if a CSS-only solution exists, I'd be extremely happy.
Thanks in advance!