2 column template - 1 column width depends if other is empty

[gavrd1]

Hi everyone

I am just working on setting up a template for Joomla and it consists of 2 columns (let's call these LHScol and RHScol) both sat within a container div that is 960px wide.

If both columns were to have content in them then I would want LHScol to be 200px wide and RHScol to be 760px wide. RHScol would then always sit to the right of LHScol no matter the width of the content in RHScol. i.e. it would have a maximum width of 760px.

However, if no content or modules were in LHScol (i.e. it is empty) I would like it to collapse to width 0 and therefore RHScol would then have a maximum width of 960px available.

Is it possible to do this via html/css styling or does it require something more dynamic such as a script to detect the content and resize the columns?

Thanks

[imarklee]

If you are doing this in your Joomla template, you can use the @countModules method to count the total number of modules loaded for the particular position.

[Mr. Wimpy]

Hey, here's how you can do this:

The html in your index.php

Code: Select all

<?php if($this->countModules('LHSCol')) { ?>
<div class="LHSCol">
<jdoc:include type="modules" name="LHSCol" />
</div>
<?php } ?>

<div class="content<?php if($this->countModules('LHSCol')) { echo " RHSCol"; } ?>">
<jdoc:include type="component" />
</div>

the css

Code: Select all

.LHSCol {
width: 200px;
...
}
.RHSCol {
width: 760px;
...
}

What happens:
When you have set no module in position LHSCol the div with class=LHSCol is NOT displayed, and
the 2nd div only gets class="content".

When you did set a module in position LHSCol the div class=LHSCol is displayed, and
the 2nd div gets class="content RHSCol"

Good luck.