Just realised I'd sent this to Mansour only - Just in case anyone else is interested..
> -----Original Message----- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of Mansour > Sent: 01 October 2008 18:25 > To: css-d > Subject: [css-d] fluid layout within a div with title and controls > > Hello all: > I have been trying to do this for a while with no luck. I am trying to > create a layout for sections of my page that looks like a window > (title bar, controls ..etc). Here's the html > > <div class="window"> > <div class="window-bar" style="background:blue"> > <div class="title"> my title</div> > <div class="controls"> <img /> <img /> </img> </div> > </div> > <div class="window-contents"> > my contents > </div> > </div> > > > .window-bar{width:100%;} > .title{float:left;} > .controls{float:right;} > > however, when I float .title and .controls the .window-bar resize and > disapear as they go out of this container. I tried many things but > nothing worked. Can someone please suggest something? > Hi I have exactly this on my own site (www.visualcomputing.co.uk) - and yes, I had fun getting it to work!! I want to revisit it but there's always something else .. So this can probably be trimmed down somewhat, but basically what I ended up with: <div class="web-look"> <h1><img src="i/iconweblook.gif" alt="" />Title</h1> <p class="webbar" ><img src="i/webicons.gif" alt="" class="webbar"/></p> <p><img src="i/miniwebpage.gif" alt="image of a Web page" width="122" height="91" />Window contents</p> </div> .web-look { margin-top: 1em; float: right; } .web-look h1 { color: #FFFFFF; background: url(../i/weblookbar.gif) repeat; margin: 0em; padding: 0em; } .web-look h1 img { margin-right: 0.25em; margin-left: 0.25em; margin-top: 0.1em; } .web-look p{ margin-right: 1em; margin-left: 1em; padding-bottom: 0.5em; } .web-look img{ float: left; margin-right: 1em; } .web-look p.webbar { margin: 0px; padding: 0px; background: url(../i/webiconsend.gif) repeat-x; height: 2.5em; } .web-look img.webbar { height: 2.5em; } ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
