CSS + dynamic width

tomc2506
03-05-2006, 06:27 AM
Well as most of you probably know, fixed width is not highly regarded on the accessibility and standards front, but I was wondering how to manage with one fixed width column and then have the remaining section pad out to the remaining width?

E.g. div1 takes 100 pixels up on the left hand side, how can div2 expand to the remaining width without the use of javascript?

I'm using XHTML and CSS.

TIA :)

Tarh
03-05-2006, 10:03 AM
Unfortunately, as much as the W3C wants you to use relative sizing, they really don't provide any really good methods for achieving that (plus the browser support has left much to be desired).

My suggestion would be to use tables for this, as they're widely supported. You would just set the border-collapse to collapse, remove padding for the cells, have the left cell at 100px, and leave the width for the right cell blank.

But if you feel that you must use divs, I know at least one way, but it only works in FireFox:
<style type="text/css">
<!--
div.div1 {
background-color:red;
position:absolute;
left:0pt;
width:100px;
top:0pt;
}
div.div2 {
background-color:orange;
position:absolute;
top:0pt;
right:0pt;
left:100px;
}
-->
</style>
<div class="div1">
test
</div>
<div class="div2">
test2
</div>

Edit:

Although, if you added a width to the style for div2, and set it to a percentage, then the cell would expand ALMOST the whole width in IE as well (but will remain expanding in FireFox)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum