tags:

views:

77

answers:

3

In WPF you can set the width of a column to occupy the remaining space by setting the width to a star. Will there be something similar in future versions of HTML or CSS?

Example:

<div style="float: left; width: 50px;">
  Occupies 50px of the page width
</div>
<div style="float: left; width: 1*;">
  Occupies 25% of the rest of the page width
</div>
<div style="float: left; width: 3*;">
  Occupies 75% of the rest of the page width
</div>

It would really help web developers out there if this could be implemented in future versions of browsers.

+4  A: 

There is a template layout module for CSS 3 that does something similar.


Edit    But you can already do that:

<div style="padding-left: 50px">
    <div style="float: left; width: 50px; margin-left: -50px;">
        Occupies 50px of the page width
    </div>
    <div style="float: left; width: 25%">
        Occupies 25% of the rest of the page width
    </div>
    <div style="float: left; width: 75%;">
        Occupies 75% of the rest of the page width
    </div>
</div>

The additional padding-left and margin-left adjustment is to have the content model of the outer DIV at 100% minus 50px width.

Gumbo
The template layout module looks really promising! The current solution you are suggesting solves my problem perfectly! Thanks!
knut
+1  A: 

You can already achieve this in HTML...

Here's your example, adjusted to work in just HTML.

<div style="float: left; width: 50px;">
  Occu- pies 50px of the page width
</div>
<div style="margin-left: 50px; width: 100%;">
    <div style="float: left; width: 25%">
      Occupies 25% of the rest of the page width
    </div>
    <div style="float: left; width: 75%;">
      Occupies 75% of the rest of the page width
    </div>
</div>
Sohnee
Wouldn't that make it 100% wide, but jutting out to the right by 50px?
Charlie Somerville
@Charlie Somerville: It needs some additional tweaking but it works already.
Gumbo
+1  A: 

The W3C's CSS Working Group has accepted a proposal for a percent minus pixels feature which could be used to the same effect as the star feature.

It could work like this, although I'm not certain

.fixedCol {
    width:200px;
}
.fluidCol {
    width:100% minus 200px;
}
Charlie Somerville