Reputation: 15
First of all, I'd like to apologize, if this problem already has an answer in stackoverflow.com, it's just that I couldn't think of a way how to google the solution. Anyway, here's my problem: I'm working on a Joomla! 3.0.2 website and I have encountered a problem with div width.
I want to have 2 different div-s in my wrapper as so:
<div class="wrapper">
<div class="content"></div>
<?php if($this->countModules('sidebar')) :?>
<div class="sidebar"></div>
<?php endif; ?>
</div>
I want the "content" to have 70% width of the wrapper and "sidebar" to have 30%, but only when the sidebar has been selected. If sidebar module is not active, I want the "content" width to be 100% .. my question is - how do i do that? I've tried numerous options in css but so far i have not succeeded.
Upvotes: 0
Views: 785
Reputation: 42736
set a second class to the content
div if countModules('sidebar')
is 0 and use css to set styles
SCRIPT
<div class="wrapper">
<div class="content <?php if($this->countModules('sidebar')==0) echo "full"; ?>"></div>
<?php if($this->countModules('sidebar')) :?>
<div class="sidebar"></div>
<?php endif; ?>
</div>
CSS
.content {
width:70%;
}
.content.full {
width:100%;
}
.sidebar {
width:30%;
}
the .content.full
selector will override the .content
one.
Upvotes: 1