Menu
I have a dynamically generated web page that is constructed using floated divs. The idea is that my CMS can put whatever I like pretty much anywhere on a page within a grid structure.
However, I run into two problems.
The first is that because the pages use floating divs, they do not inherit height so I can’t say “height:100%” in the floating blocks, which means they size up according to their content and not according to the page layout. I’ve tried running a JavaScript routine when the page loads to collect the height of the div each row of floats is contained in, and then apply that height to all of the divs in that row but it doesn’t work. Indeed, it doesn’t even read the div height correctly. Does anyone know how I can make all of the divs in that float row the same height as the highest of them?
The second is that I then want to be able to vertically align whatever element I put into that block. I’ve tried creating css tables inside the divs but that doesn’t seem to work either, perhaps because of the height issue. Any suggestions?
Here is the latest html…
[code=html]
<body>
<div id=’holder’ style=’width:900px; margin: 0 auto 0 auto’>
<div id=’r1′ style=’border:1px solid black; margin:-1px;’>
<div style=’float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF’>
<div id=’r1c1′ style=’display: table; width:100%; text-align: left; border: 1px solid black’>
<div id=’d11′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d11′)”>
<div style=’display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF’>
<img src=’/images/graphics/image.jpg’><span id=’s1c1′></span>
</div>
</div>
</div>
</div>
<div style=’float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF’>
<div id=’r1c2′ style=’display: table; width:100%; text-align: left; border: 1px solid black’>
<div id=’d12′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d12′)”>
<div style=’display:table-cell; vertical-align: middle; height:33%; background-color:#FFFFFF’>
This is empty.<span id=’s1c2′></span>
</div>
</div>
<div id=’d12′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d12′)”>
<div style=’display:table-cell; vertical-align: middle; height:34%; background-color:#FFFFFF’>
This is empty.<span id=’s1c2′></span>
</div>
</div>
<div id=’d12′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d12′)”>
<div style=’display:table-cell; vertical-align: middle; height:33%; background-color:#FFFFFF’>
This is empty.<span id=’s1c2′></span>
</div>
</div>
</div>
</div>
<div style=’float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF’>
<div id=’r1c3′ style=’display: table; width:100%; text-align: left; border: 1px solid black’>
<div id=’d13′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d13′)”>
<div style=’display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF’>
<div style=’margin-bottom:10px;’>
<form name=’login’ id=’login’ method=’POST’ action=’/security.php’>
<input type=’hidden’ name=’act’ value=’logout’>
<div style=’background-color:#F1F1F1; height:16px; margin-bottom:2px;’>
<p style=’margin-left:4px; margin-top:4px; margin-bottom:1px; font-weight:bold; ‘>Welcome Back </p>
</div>
<p><input style=’font-size:8pt; width:190px; font-weight:bold’ type=’submit’ value=’Log Out’></p>
</div>
<span id=’s1c3′></span>
</div>
</div>
</div>
</div>
<div style=’clear:both’>
</div>
</div>
<div id=’r2′ style=’border:1px solid black; margin:-1px;’>
<div style=’float:left; width:900px; min-height:10px; margin:-1px; border:1px solid #000000′>
<div id=’r2c1′ style=’display: table; width:100%; text-align: left; border: 1px solid black’>
<div id=’d21′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d21′)”>
<div style=’display:table-cell; vertical-align: middle; height:100%; background-color:#000000′>
This is empty.<span id=’s2c1′></span>
</div>
</div>
</div>
</div>
<div style=’clear:both’>
</div>
</div>
<div id=’r3′ style=’border:1px solid black; margin:-1px;’>
<div style=’float:left; width:300px; min-height:10px; margin:-1px; border:1px solid #FFFFFF’>
<div id=’r3c1′ style=’display: table; width:100%; text-align: left; border: 1px solid black’>
<div id=’d31′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d31′)”>
<div style=’display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF’>
This is empty.<span id=’s3c1′></span>
</div>
</div>
</div>
</div>
<div style=’float:left; width:600px; min-height:10px; margin:-1px; border:1px solid #FFFFFF’>
<div id=’r3c2′ style=’display: table; width:100%; text-align: left; border: 1px solid black’>
<div id=’d32′ style=’display:table-row; ‘ onmouseover=”getlocation(‘d32′)”>
<div style=’display:table-cell; vertical-align: middle; height:100%; background-color:#FFFFFF’>
This is empty.<span id=’s3c2′></span>
</div>
</div>
</div>
</div>
<div style=’clear:both’>
</div>
</div>
</div>
<script type=’text/javascript’>
<!–
h = document.getElementById(‘r1’).offsetHeight;
document.getElementById(‘r1c1’).style.height = h;
m = ‘R1 C1 H: ‘ +h;
document.getElementById(‘s1c1’).innerHTML = m;
document.getElementById(‘r1c2’).style.height = h;
m = ‘R1 C2 H: ‘ +h;
document.getElementById(‘s1c2’).innerHTML = m;
document.getElementById(‘r1c3’).style.height = h;
m = ‘R1 C3 H: ‘ +h;
document.getElementById(‘s1c3’).innerHTML = m;
h = document.getElementById(‘r2’).offsetHeight;
document.getElementById(‘r2c1’).style.height = h;
m = ‘R2 C1 H: ‘ +h;
document.getElementById(‘s2c1’).innerHTML = m;
h = document.getElementById(‘r3’).offsetHeight;
document.getElementById(‘r3c1’).style.height = h;
m = ‘R3 C1 H: ‘ +h;
document.getElementById(‘s3c1’).innerHTML = m;
document.getElementById(‘r3c2’).style.height = h;
m = ‘R3 C2 H: ‘ +h;
document.getElementById(‘s3c2’).innerHTML = m;
–>
</script>
</body>
Of course, some of the elements, like the <span>s are there to help me debug.
Any suggestions?
Thanks
CTB