Try this
<style type="text/css">
#wrapper {
height: 100px;
width: 800px;
}
#box1 {
height: 100px;
width: 200px;
float: left;
border: thin solid #F00;
}
#box2 {
height: 100px;
width: 200px;
float: left;
border: thin solid #00C;
}
#box3 {
float: left;
height: 100px;
width: 200px;
border: thin solid #930;
}
#box4 {
float: left;
height: 100px;
width: auto;
border: thin solid #FC0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">BOX 1</div>
<div id="box2">BOX2</div>
<div id="box4">BOX4 flexi</div>
<div id="box3">BOX3</div>
</div>
</body>
Box 4 is the flexi one and will stretch but only up to the MAX size of the
wrapper
Lucas M Meyer
CEO
Silvermoonsky Web Design
www.silvermoonsky.com
-----Original Message-----
From: wsg@webstandardsgroup.org [mailto:w...@webstandardsgroup.org]
Sent: 06 October 2009 09:36 PM
To: wsg@webstandardsgroup.org
Subject: WSG Digest
*********************************************************************
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
*******************************************************************
