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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With