Hi Bob, That's a good one.
I've had a quick play and the only way I've found that works as you intend is by giving widths in % - ie, your fixed divs, 1, 2 (floated left) and 4 (floated right) all have, say, width:10%; while your elastic div 3 (also floated left) is given width:70%; Markup, using background colours to visually define the divs: <div id="wrapper"> <div class="fixed" id="box1">box 1 - fixed</div> <div class="fixed" id="box2">box 2 - fixed</div> <div class="elastic" id="box3">box 3 - elastic - stretches with content</div> <div class="fixed" id="box4">box 4 - fixed</div> </div> #wrapper { overflow:hidden; width:100%; } #wrapper div { height:50px; } #wrapper .fixed { width:10%; } #wrapper .elastic { width:70%; } #wrapper #box1 { background:#f00000; float:left; } #wrapper #box2 { background:#fff000; float:left; } #wrapper #box3 { background:#00f000; float:left; } #wrapper #box4 { background:#0000f0; float:right; } It's not perfect by any means - anyone else got any methods? Rich 2009/10/6 <wsg@webstandardsgroup.org> > ********************************************************************* > WEB STANDARDS GROUP MAIL LIST DIGEST > ********************************************************************* > > > From: "designer" <desig...@gwelanmor-internet.co.uk> > Date: Tue, 6 Oct 2009 11:28:30 +0100 > Subject: elasticity and floats > > Can anyone help me sort a problem please: > > I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed > width > and I want div 3 to be flexible width and fill the gap: > > > <div id="wrapper"> > > [fixed- float left] [fixed - float left] [elastic - no floats] [fixed - > float right] > > </div> > > The wrapper div takes care of the clearing, using overflow : hidden. > > It's easy with a table, but I don't seem to be able to do it with > floats. > The ways I've tried either don't line up the divs vertically, or the 3rd > div > width shrinks to content size. > > I hope I've explained this properly (nothing online to see yet) and I > hope > someone can help. > > Thanks, > > Bob > > > ************************************************************** > Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ************************************************************** > > > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************