CODEWITHSUNDEEP
htmlcss
jrumbinas
jrumbinas

Reputation: 426

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.

Upvotes: 3

Views: 1181

Answers (3)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41965

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...

Upvotes: 1

LoveAndCoding
LoveAndCoding

Reputation: 7947

@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

Upvotes: 1

OpenGG
OpenGG

Reputation: 4560

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

Upvotes: 1

Related Questions