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]
