if I understood right, you want the content div to span to 100% of the
container div if the side div doesn't exist, otherwise the side div
will be 180px floated to the right and the content div will re-sized
to the space left, don't you?
this should be your html code:
<div id="container">
<div id="header">optional</div>
<div id="side"><!--side goes first -->
{include file=$sidebar}
</div>
<div id="content">
{include file="$page.tpl"}
</div>
<div id="footer">
<div><p>Footer Text</p></div>
</div>
</div>
the css:
* {padding: 0; margin: 0;}
#container {
position: relative;
width: 770px;
margin: 0 auto;
}
#header {
/* optional */
width: 100%;
height: 100px;
background-color: #00ff00;
display: block;
}
#content {
width: auto;
}
#content div {
padding: 10px;
}
#side {
float: right;
width: auto;
background-color: #F3CF00;
}
#side div {
width: 180px;
padding: 10px;
}
#footer {
clear: both;
/* to deal with IE6 */
min-height: 1%;
height: auto !important;
height: 1%;
/* end patch IE6 */
background-color: #586695;
}
#footer div {
padding: 10px;
}
IMPORTANT: Your include file {$sidebar} SHOULD start with an empty
<div> because that will set the #side's width if present (you could
add an ID or class to such div but don't forget to adjust that in the
css accordingly, something like - #side div#inside ) otherwise it
won't work. ... of course close the </div> at the end of the file,
The code is valid (with the proper DOCTYPE declaration) and works
flawlessly in IE6/7, FF, Opera, Chrome and Safari
On Jan 14, 9:49 am, Eric Lachance <[email protected]> wrote:
> 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]
