I'm having trouble with some vertical CSS positioning. I would like to create a page with the following layout:
B AAA
AAA
AAA
C AAA
A is a grid (table) of data B is aligned to the top of the grid C is aligned to the bottom of the grid
How do I get B and C to align correctly?
EDIT: Sorry for the confusion about Div/Table tags! I'm ideally looking to do this with pure CSS, but if it's a lot of work then I'll settle for dittodhole's solution of using a table.
I just tested this (adds in a wrapper div):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
#wrapper{ position: relative; }
#b, #c{ position: absolute; left: 0; width: 80px; background: #ccc; }
#a{ margin-left: 80px; }
#b{ top: 0; }
#c{ bottom: 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="b">Contents of B</div>
<table border="0" id="a">
<tr><th>Header</th><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<div id="c">
Contents of C
</div>
</div>
</body>
</html>
divs C and B need to be given a fixed width, and absolutely positioned. The wrapper is given relative positioning to make this work. Table A is given a margin equal to the width of C & B.
I've not tested cross-browser, just Firefox 3.
why so fishy - this is pretty easy:
<table>
<tr>
<td style="vertical-align: top;">B</td>
<td rowspan="2">grid</td>
</tr>
<tr>
<td style="vertical-align: bottom;">C</td>
</tr>
</table>
using some jQuery, I can get this working cross-browser (including IE6). A border is required on the wrapping div to get IE6 working (might be a hasLayout thing?). Div B can be a variable width, and everything should accomodate.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
#wrapper{ position: relative; border: 1px solid #fff; }
#b, #c{ position: absolute; left: 0; background: #ccc; margin: 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var b_width = $('#b').width();
var a_height = $('#a').height();
var c_height = $('#c').height();
var c_top = a_height - c_height;
$('#a').css({"margin-left": b_width + "px"});
$('#c').css({top: c_top + "px"});
})
</script>
</head>
<body id="">
<div id="wrapper">
<div id="b">Contents of B</div>
<table border="0" id="a">
<tr><th>Header</th><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<div id="c">
Contents of C
</div>
</div>
</body>
</html>
This can be accomplished with pure div design using this grid layout generator. 4 rows and 4 columns. leave the 2nd and 3rd grid of the 1st column blank.