how to modify 2 column layout for my content

[TJINAK]

Hello everyone,

I'm migrating a site to cmsms and I've run into a small problem. 

I'm using the css menu left + 1 column template.

The width of my header is about 800px.  So this is what I've set the width of my page to.

My problem is that the css left menu takes up about 30% of the page width all the way down the page.

What I would like to do is end the menu column so I can maximize the width of the page below the menu.

CSS Menu left + 1 column layout:
_____________
|    |               |
|    |               |
|    |               |
|    |               |
|__|_________|


What I'm going for:
______________
|   |                  |
|   |                  |
|__|                 |
|                      |
|____________ |

Not the best drawing but you can see that I'm trying to make use of the space under the css menu column.


Here is the breakdown of my template:

The page wrapper setting my maximum page width, so my header fits the page:

/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;       /* this centers wrapper */
/*    max-width: 80em;  IE wont understand these, so we will use javascript magick */
/*    min-width: 60em; */
   max-width: 787px;
   min-width: 787px;
   background-color: #fff;
   color: black;
}


Here is how the left column and right columns are layed out to accomodate the menu on the left and content on the right:

div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}


Writing this out makes me think I need a third div tag that would sit below these two and have a width of 100%.

Not sure how to write this... perhaps like so:

div#main2 {
margin-left: 0;
margin-right: 2;
width: 100%;
clear: both;
}

Any help would be appreciated!

Thank you,

TJ

[TJINAK]

After writing the above I then went into my template and added the red text thinking I can do this....wrong...

   {* Start Content (Navigation and Content columns) *}
   

      {* Start Navigation *}
     
         Navigation
         {menu template='cssmenu.tpl'}
     
     
      {* End Navigation *}


      {* Start Content Area *}
     
         {print showbutton=true script=true}
         {title}
         {content}

       

      {* Content Area below *}
     
       {content}

       

         {* Start relational links *}


{anchor anchor='main' text='^ Top'}

         
            {cms_selflink dir="previous" label="Previous page: "}

            {cms_selflink dir="next"}
         
         {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
{* End relational links *}

     
     
  {* End Content Area *}


Help, Help me if you can...  (The beattles in the background) 

Thanks!

TJ

[TJINAK]

I think I got it, BUT, if you know better please let me know.  Here is what I did:

In the stylesheet:

div#main2.hascontent{
margin-left: 0;
margin-right: 2;
width: 100%;
clear: both;
}

In the template:

{* Content Area below menu and right column*}
     
      {content class="hascontent">
        {content block='main2'}
}

       

Thank you for reading this post,

TJ

[Dr.CSS]

If you make the main have just a 2% or 0px margin left any thing that goes below the left area will fill it, wrap to the left, if you use what you have and have just a few words in the main content and more in the second one the second content will do the wrapping...