0
Welcome Guest! Login
0 items Join Now

Collapsing right column with css

Last Post
Search Topic

  • Collapsing right column with css

    Posted 18 years 5 months ago
    • I created a 2 column layout in css, but then customer came back asking to collapse the right column on inside pages.

      I added the <?php if(mosCountModules( 'right' )) { ?> right column divs etc <?php } ?>

      However, the pages with no right modules, the left column doesnt expand due to width set on that left float. If I take out the width then I get overlapping of the right column when right modules are present.

      I ended up adding a table with 2 columns to do the trick. But if anyone knows how to accomplish this with css I'd like to know.

      Heres how I ended up doing it:
      <table width="743"><tr><td width="100%" valign="top"> <!-- table for collapsing right column properly -->
                         
                    <div id="main_content">                                              
                              <div id="mainbody">
                                             <?php if(mosCountModules( 'user1' )) { ?>
                              &nbsp; &nbsp; &nbsp; &nbsp;      <div class="usermodule">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;          <?php mosLoadModules ( 'user1'); ?>&nbsp; 
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
                              &nbsp; &nbsp; &nbsp; &nbsp;                <?php } ?>
                                                                 <?php if(mosCountModules( 'user2' )) { ?>
                              &nbsp; &nbsp; &nbsp; &nbsp;      <div class="usermodule">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;          <?php mosLoadModules ( 'user2'); ?>&nbsp; 
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
                              &nbsp; &nbsp; &nbsp; &nbsp;                <?php } ?>
                                                                 <?php if(mosCountModules( 'user3' )) { ?>
                              &nbsp; &nbsp; &nbsp; &nbsp;      <div class="usermodule">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php mosLoadModules ( 'user3'); ?>&nbsp; 
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
                              &nbsp; &nbsp;   <?php } ?>
                              
                                             <?php mosMainBody(); ?>
                              </div> <!-- mainbody close -->
                    
                    </div> <!-- main_content close -->
                    
                    </td>
                    
                    <!--********************sidebar_content************************************************-->
                    <?php if(mosCountModules( 'right' )) { ?>
                         
                    <td width="255px" valign="top">
                         
                    <div id="side_content">
                    
                         <div class="side_outer">
     &nbsp;                      <div class="side_inner">
     &nbsp;                      <?php mosLoadModules ( 'right', -2 ); ?>
     &nbsp;                      </div> <!-- side_inner close -->
     &nbsp;                 </div> <!--side_outer close -->
                    
                    </div> <!-- side_content close -->
                    
                    </td>
                    
                    <?php } ?>
                    
                    </tr></table>

      Then I was able to take out the float: left for the main_content and the left margin in the side_content

      Thanks!

      John
    • _____________
      John
    #23097

Time to create page: 0.063 seconds