Template countmodules adjustable width? - templates

Question

Okay,
I'm sure this has been answered before and also I believe this link could help me http://docs.joomla.org/Hide_column_to_avoid_width_issues
I'm not very familiar with syntax or php coding so I had trouble following what I'm trying to do..
I'm building a joomla 2.5 template and I'm using countmodules to hide 'divs' or entire positions when there are no modules published there. My problem is let's say in my main column of 100% width I want to sometimes display a module to the right of the content within the main content box of only 25% width of the whole columns width. Okay this works.
I want to however float the content to the left and this 25% width module we will call 'right1' and it floats to the right, so I need to give my main content around a 75% width to make everything float nicely and display properly and it does! My question is I don't understand how to make my main content a 100% width if 'right1' does not exist. If I display no modules in 'right1' so it does not display how would I change my css of the main content to adjust to 100% instead of being shrunk to 75% to make up for the missing right1 position.
I'm probably really stupid and there's a simple solution right in front of me I cannot remember. Thanks in advance!
-edited-
It goes along the lines of something like this
<div id="contentcontainer">
<jdoc:include type="message" /><jdoc:include type="component" />
<?php if ($this->countModules( 'right1' )) : ?>
<div id="right1"><jdoc:include type="modules" name="right1" style="xhtml" /></div>
<div class="clearfix"></div><?php endif; ?><?php if ($this->countModules('right2')): ?>
<div id="right2"><jdoc:include type="modules" name="right2" style="xhtml" /></div>
<div class="clearfix"></div>
<?php endif; ?>
</div></div></div>
I just added the contentcontainer to make sure they are within a 100% width container to work with
#contentcontainer{
width:100%;
position:relative;
}
#right1, #right2 {
border: 1px solid #990000;
border-radius: 18px 18px 18px 18px;
box-shadow: 5px 3px 5px #990000;
display: block;
float: right;
height: auto;
width: 25%;
}
I put whatever tag the content uses to float:left; and what I tried doing is using 'min-width:' to the main content and min-widths don't seem to be working. So what could be a solution and hopefully I don't have to turn to jQuery as suggested once. Is this enough information?
-edited-

Answer 1

You can do it using some simple PHP and an inline style. I'm not an expert on PHP so this may not be as elegant as it could be however I'm sure someone will correct it.
<div id="contentcontainer">
<?php
//column calculation
$columns == 0;
if($this->countModules( 'right1' )) {$columns++;}
if($this->countModules( 'right2' )) {$columns++;}
$centercolumnwidth = 100 - (25 * $columns);
?>
<jdoc:include type="message" />
<div id="maincolumn" style="width:<?php echo $centercolumnwidth ?>%">
<jdoc:include type="component" />
</div><!--/maincolumn-->
<?php if ($this->countModules( 'right1' )) : ?>
<div id="right1">
<jdoc:include type="modules" name="right1" style="xhtml" />
</div><!--/right1-->
<div class="clearfix"></div>
<?php endif; ?>
<?php if ($this->countModules('right2')): ?>
<div id="right2">
<jdoc:include type="modules" name="right2" style="xhtml" />
</div><!--/right2-->
<div class="clearfix"></div>
<?php endif; ?>
</div><!--/contentcontainer-->
I have just typed this out without testing but it should set the width of the #maincolumn to either 100%, 75% or 50% depending on whether right1 and/or right2 are published.
You will need to float #maincolumn to the left in your CSS as well.