CSS fluid columns (depending on content width)
Can anyone help me to find CSS solution (yep, no JS) to this problem:
+---------+----------------------+-------------------------------+
| Fixed | Variable | Flexible开发者_运维百科 width |
| width | width content | (adjusting to content width) |
+---------+----------------------+-------------------------------+
<div>
<div>Fixed width</div>
<div>Variable width content</div>
<div>Flexible width (adjusting to content width)</div>
</div>
NOTE: IE7 support is needed. All columns are transparent and CAN NOT overlap with each other.
- 1st column is fixed width;
- 2nd column is variable width (depending from image dimensions);
- 3rd column must take all remaining space.
How about this one.
parent -> position:relative;
parent:after -> clear:both
fixed -> position:absolute
variable -> float:left;padding-left:a-fixed-num
flex -> display:block
@Rufus has the right idea, but it is missing out on one thing. Height. I'll recommend pretty much the same thing with some minor modifications:
.parent {
position:relative;
}
.parent:after {
clear: both;
}
.fixed {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px; /* Conflicting absolute position trick */
width: 150px; /* Or whatever the width you need is */
}
.variable {
margin-left: 150px; /* Or, again, whatever you need */
float: left;
min-height: 100%; /* Don't use a border or padding or this will be messed up */
}
.flex {
min-height: 100%; /* Same as variable, border or padding could mess this up */
}
All columns should be the same height, and you should be ready to go
Try this:
.group {
display: table;width: 100%; table-layout: fixed;
}
.group > div {
display: table-cell
}
jsFiddle example
That way, the right div is not 100% width, but the middle div does not expand with it's content...
精彩评论