Fixed doors - fill all available space?
in [CSS]
|
From: Gus Richter on 21 May 2010 21:08 On 5/21/2010 7:57 PM, dorayme wrote: > In article<ht6doq$5dl$1(a)news.eternal-september.org>, > Gus Richter<gusrichter(a)netscape.net> wrote: > >> On 5/21/2010 11:20 AM, Mark Smith wrote: >>> Hello, >>> >>> I was wondering in the following example, is it possible to make >>> divMiddleContainer dynamically expand to fill all available horizontal >>> space without pushing divOpenContainer and and divCloseContainer onto >>> another line? >>> >>> divOpenContainer and divCloseContainer need fixed widths because they >>> will contain images. >>> >>> Thanks for any suggestions. >> >> Run this modified version: >> > ... >> #divMiddleContainer{ > ... >> background-color:red; >> text-align:center; >> } > ... >> >> <div id="divContainer"> >> <div id="divOpenContainer">(</div> >> <div id="divCloseContainer">)</div> >> <div id="divMiddleContainer">my content goes here</div> >> The idea here is to float the left div left, the right div right and to >> allow the middle one to "flow" between the two. >> </div> > > Give MiddleContainer a left and right margin of 50px if you don't > want content spilling underneath the left and right areas. Give them a fish ......., but if you give them a net ....... I gave a specific response. Further questions may follow, depending .... -- Gus
From: Mark Smith on 24 May 2010 05:44 On May 21, 5:52 pm, Gus Richter <gusrich...(a)netscape.net> wrote: > On 5/21/2010 11:20 AM, Mark Smith wrote: > > > Hello, > > > I was wondering in the following example, is it possible to make > > divMiddleContainer dynamically expand to fill all available horizontal > > space without pushing divOpenContainer and and divCloseContainer onto > > another line? > > > divOpenContainer and divCloseContainer need fixed widths because they > > will contain images. > > > Thanks for any suggestions. > > Run this modified version: > Thank you! That worked very well. Just one problem. When I give the divs either a background image or a border I see a vertical white gaps between the divs in... *drum roll* IE6 only! Is there a way to fix this? Thanks <style> div {border:1px solid black} #divOpenContainer{ width:15px; height: 54px; /*background-image:url(left.png);*/ background-color:red; float:left; } #divCloseContainer{ width:15px; height: 54px; /*background-image:url(right.png);*/ background-color:red; float:right; } #divMiddleContainer{ /*background-image: url(middle.png); background-repeat:repeat-x;*/ background-color:green; height: 54px; text-align:center; } </style> <div id="divContainer"> <div id="divOpenContainer"> </div> <div id="divCloseContainer"> </div> <div id="divMiddleContainer">my content goes here</div> </div>
From: Gus Richter on 25 May 2010 01:54 On 5/24/2010 5:44 AM, Mark Smith wrote: > On May 21, 5:52 pm, Gus Richter<gusrich...(a)netscape.net> wrote: >> On 5/21/2010 11:20 AM, Mark Smith wrote: >> >>> Hello, >> >>> I was wondering in the following example, is it possible to make >>> divMiddleContainer dynamically expand to fill all available horizontal >>> space without pushing divOpenContainer and and divCloseContainer onto >>> another line? >> >>> divOpenContainer and divCloseContainer need fixed widths because they >>> will contain images. >> >>> Thanks for any suggestions. >> >> Run this modified version: >> > > Thank you! That worked very well. > > Just one problem. When I give the divs either a background image or a > border I see a vertical white gaps between the divs in... *drum roll* > IE6 only! > > Is there a way to fix this? I have no idea. Google for IE6 bugs and IE6 bug fixes Good Luck. -- Gus
From: Mark Smith on 27 May 2010 06:34 On May 25, 6:54 am, Gus Richter <gusrich...(a)netscape.net> wrote: > On 5/24/2010 5:44 AM, Mark Smith wrote: > > > > > On May 21, 5:52 pm, Gus Richter<gusrich...(a)netscape.net> wrote: > >> On 5/21/2010 11:20 AM, Mark Smith wrote: > > >>> Hello, > > >>> I was wondering in the following example, is it possible to make > >>> divMiddleContainer dynamically expand to fill all available horizontal > >>> space without pushing divOpenContainer and and divCloseContainer onto > >>> another line? > > >>> divOpenContainer and divCloseContainer need fixed widths because they > >>> will contain images. > > >>> Thanks for any suggestions. > > >> Run this modified version: > > > Thank you! That worked very well. > > > Just one problem. When I give the divs either a background image or a > > border I see a vertical white gaps between the divs in... *drum roll* > > IE6 only! > > > Is there a way to fix this? > > I have no idea. > Google for IE6 bugs and IE6 bug fixes > > Good Luck. > > -- > Gus FWIW, I fixed this using an underscore hack. Adding _margin- right:-3px; and _margin-left:-3px; to the divs on either side respectively closed the gap!
From: Thomas 'PointedEars' Lahn on 27 May 2010 07:41
Mark Smith wrote: > Gus Richter wrote: >> Mark Smith wrote: >> > Just one problem. When I give the divs either a background image or a >> > border I see a vertical white gaps between the divs in... *drum roll* >> > IE6 only! >> > >> > Is there a way to fix this? >> >> I have no idea. >> Google for IE6 bugs and IE6 bug fixes >> [...] > > FWIW, I fixed this using an underscore hack. Adding _margin- > right:-3px; and _margin-left:-3px; to the divs on either side > respectively closed the gap! I sense much bogosity in you. Bogosity leads to dirty hacks, dirty hacks lead to error-proneness, error-proneness leads to suffering. This is the path to the Dark Side. PointedEars -- var bugRiddenCrashPronePieceOfJunk = ( navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1 ) // Plone, register_function.js:16 |