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
*******************************************************************
