I was experimenting with a MINIMAL MARKUP and wanted to find a way to line up 3 from element so that they took up 100% of the width of their container. More specifically, I wanted to have 2 items have fixed widths and the other APPEAR to take up the remaining space.


This kinda thing is a a piece of cake with Normal HTML elements . I mean to do something like this you would wrap the elements float the first element one way , the second the other way and give the last corresponding horizontal margins, display:block if necessary, or use overflow:hidden.

The problem seems to be that form control don't actually become block elements when you give them "display:block". That is you still have to give them explicit width , it seems and they do don't naturally stretch to fill the container... etc. Or maybe I simply dont know how to reset them properly.

Essentially, this is what i have been toying with:
Code:
<style type="text/css">
 label, .l{float:left;  width:150px;}
 button, .r{float:right;  width:65px;}
 input, .main {display:block;  width:100%; }/*width:100% causes  elemnt to drop*/ 
 .l,.r{background: pink}
 .main{background: orange}
 .cont{clear:both }
 </style>

<div class="cont"><button>button</button><label for="text">Label</label><input type="text" name="text"></div>

<div class="cont"> 
	<div class="l">left stuff</div>
	<div class="r">right stuff</div>
	<div class="main">main stuff</div>

</div>
Yes, I could wrap each form element in a SPAN or DIV, and go from there but that would be nearly tripling the markup... I like to avoid that when I can.


Am I banging my head for nothing? Is there a way to do this or is this just another limitation of HTML/CSS?

As always, all insights into this appreciated.