Flexible Div Blocks
I need a three column block such that, if more content in the center (middle column) - side blocks increased. Now i have this http://s2.ipicture.ru/uploads/20110714/NQ6ZNRsB.png HT
Solution 1:
I only changed the css.
#spoiler {
width:500px;
background:#ffdac0;
float: left;
}
.left {
float:left;
width:100px;
}
.middle {
float:left;
width:300px;
}
.right {
float:right;
width:100px;
}
Solution 2:
Remove the background colour from .left, .middle, .right and put it on the #spoiler along with either a float left or have some clearing at the bottom:
#spoiler {
width:500px;
background:#ffdac0;
float: left;
}
.left, .middle, .right {
height: auto !important;
height: 100%; /* for IE6 */
}
.left {
float:left;
width:100px;
}
.middle {
float:left;
width:300px;
}
.right {
float:right;
width:100px;
}
This will produce the image you're looking for.
Solution 3:
Simply use a table with 3 TD. This way it will always expand. Divs are not meant to work with eachother like that since they are block elements.
I think it can be done, but the simpler solution is the use of a good ol fashion table :)
Post a Comment for "Flexible Div Blocks"