Paulo, Using the modification in the CSS caused some of the other divs on my page to stretch behind the sidebar. Instead of spending hours of my time (and other's) trying to figure that one out, I instead use the javascript, and that works well.
Thank you for the help! Eric. On Jan 15, 6:57 am, "Paulo Diovani" <[email protected]> wrote: > Can your sidebar be a floating element, letting your content surround it? > Like this: > > CCC SS > CCC SS > CCCCCC > CCCCCC > > If so, then you Just need to render your div#side before the div#content: > > <div id="side"> > {include file=$sidebar} > </div> > <div id="content"> > {include file="$page.tpl"} > </div> > > And make some minor adjusts on your styles: > > div#content { > /* float: left; */ > display: inline; > /* width: 570px; */ > margin: 0 0 10px 10px > > } > > div#side { > float: right; > display: block; /* inline; */ > width: 180px; > background: #F3CF00; > margin: 0 10px 10px 0 > > } > > This renders equal in FF 3, MSIE 7, MSIE 8, Safari 3, Opera 9 and Chrome 2. > > But, if you need that your sidebar renders with full height... we need to > try again. > As you asked... a js workaround may be something like this: > > <script type="text/javascript"> > window.onload = function() { > var content = document.getElementById('content'); > var side = document.getElementById(side'); > > if (side.innerHTML == '') { > side.style.display = 'none'; > content.style.width = '100%'; //or, maybe, null > }} > > </script> > __ > Paulo Diovani Gonçalves > [email protected]http://diovani.com > > > -----Mensagem original----- > > De: [email protected] [mailto:[email protected]] Em > > nome de Eric Lachance > > Enviada em: quinta-feira, 14 de janeiro de 2010 15:49 > > Para: Design the Web with CSS > > Assunto: [Design with CSS 2800] Designing with a sidebar that isn't > > always there... > > > Hi! > > > I've been trying to find something on google that would help me but I > > couldn't. Most sites that have a sidebar will always have it and thus > > can use the techniques such as margins the size of the sidebar and > > such... I'm trying to make a sidebar that's conditional from within my > > code (if there's sidebar contents show it, if not don't). > > > Here's how the HTML is built, basically: > > > <div id="container"> > > <div id="content"> > > {include file="$page.tpl"} > > </div> > > <div id="side"> > > {include file=$sidebar} > > </div> > > > <div id="footer"> > > <p>Footer Text</p> > > </div> > > </div> > > > The CSS looks like this: > > div#container{width:770px;margin:0 auto 10px;padding:20px 0 10px;text- > > align:left;background:#FFF; position: relative;} > > div#content{float:left;display:inline;width: 570px;margin:0 0 10px > > 10px} > > div#side{float:right;display:inline;width: 180px;background:#F3CF00; > > margin:0 10px 10px 0} div#footer{clear:both;width:750px;margin:0 10px > > 0;padding: 10px 0; > > background: #586695;color: #FFF;text-align:center} > > > So basically at the moment if I remove the sidebar div from the > > equation, it'll display a blank space because the width is fixed. > > Obviously, if I put the width to 100% it'll "push" the sidebar down... > > and if I remove the width it will either look alright or push it down, > > depending if I have a long line of text (which I mostly always do). > > > I've seen one technique use an expression in the CSS, which is only > > compatible with IE thus doesn't go well with me (has to work with > > firefox and IE both, and possibly with safari/chrome which use the same > > rendering engine if I'm not mistaken). > > > As a workaround I could call a different CSS depending on if I have a > > sidebar or not because I'm doing this with PHP... but I would prefer to > > keep coding to a minimum and rely on CSS as much as possible. > > Javascript is however an acceptable workaround at this point. > > > Does anyone have any idea on how I could do this? > > Eric Lachance
-- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
