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]
