View Full Version : Scaling a div

11-08-2008, 12:45 AM

html and css newbie here. This issue is as follows:

<div style="background-color: Red; width: 400px; height: 100px" onclick="javascript:does(this);"></div>
<div id="div1" style="position:absolute; bottom: 0; background-color: Green; width: 400px; top: 100px; min-height: 100px"></div>

I would like div1 to take the space left over when you click on the first div. Currently the second div stays in place. I would like it expand upwards to fill the space left by the first div. I know I can do this using javascript. But is there is a way to do this without javascript, just with html and css.


11-08-2008, 01:13 AM
Well, in theory, you could, by doing something like this:

<!doctype html>
<html xml:lang="en">
<meta http-equiv="content-type"
<title>Libert&eacute;, Equalit&eacute; et Fraternit&eacute;!</title>
<style type="text/css">
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
#container {
padding-top: 100px;
width: 400px;
background: #f00;
#content {
height: 100px;
background: #00f;
#container:hover #content {
height: 100%;
<div id="container">
<div id="content">
</html>However, it's quite tricky to implement and WILL break compatibility with older browsers, so probably isn't what you're looking for.