PDA

View Full Version : how to make 2 columns, 1 fluid?

jyoun79
06-04-2007, 06:38 PM
Ok, so I have a div box, that contains rows with 2-column layouts. The left column is text, and the right column is an image. When the number of rows gets high, a vertical scrollbar will appear. However, when that happens, the scrollbar covers part of the image. I would like to have the left column shrink so that the image won't be covered. Is that possible to have it automatically resize?

Also, I'm using AJAX to determine the number of rows, so I can't always assume there will be a scrollbar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.mainBox {
width:400px;
height: 150px;
margin:0px;
padding:0px;
text-align:left;
overflow : auto;
}

.rowBox {
width: 400px;
height: 150px;
padding:0px;
}

.leftRow {
width:300px;
height: 150px;
padding:0px;
float:left;
background:white;
}

.leftTop {
width:300px;
height: 100px;
padding:0px;
float:left;
background:gray;
}

.leftBottom {
width:300px;
height: 50px;
padding:0px;
float:left;
background:yellow;
}

.rightRow {
width:100px;
height: 150px;
padding:0px;
float:left;
background:green;
}
</style>
</head>
<body>
<div class="mainBox">
<div class="rowBox">
<div class="leftRow">
<div class="leftTop">top box</div>
<div class="leftBottom">bottom box</div>
</div>
<div class="rightRow"><img src="image.gif" width="100" height="50" align="right"></div>
</div>
</div>
</body>
</html>
_Aerospace_Eng_
06-04-2007, 06:47 PM
Why are you using overflow:auto; on .mainBox? Check out this example
http://bonrouge.com/2c-hf-fluid(r).php
jyoun79
06-04-2007, 06:51 PM
The thing about that is, it uses the entire page for the 2 columns, but I need to just constrain it within a div. I'll still try that though, and see if it works.