This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
View Entire Thread
Re: Page Content Positioning

You can certainly do it the way Scutterman suggested. It will work just fine.

Personally, I would modify the "contentcolumn" style in the style sheet, and then create two sub classes. One for one column pages and another for two column pages.

An example might look like the code below. I removed the "margin-left" definition from the "contentcolumn" style and then created the styles "one_col" and "two_col". Each of these styles contains different "margin-left" settings that will be used to compliment the "contentcolumn" style in your HTML document.

Code:
#contentcolumn{ color: #ffffff; }
.one_col{ margin-left: 20px; /* Set a 20 pixel left margin for a one column display */ }
.two_col{ margin-left: 215px; /* Set a 215 pixel left margin for two column display */}


Simplifying your main page, the code looks like the listing below.

Code:
<div id="contentwrapper">
  <div id="contentcolumn">
    <!-- All of your page content -->
  </div>
</div>


On pages that will require two columns, the "contentcolumn" div would look like the following code. This says that the "contentcolumn" div is of the "two_col" class and sets the left margin to 215 pixels.

Code:
<div id="contentwrapper">
  <div id="contentcolumn" <span style="font-weight:bold;">class="two_col"</span>>
    <!-- All of your page content -->
  </div>
</div>


On pages that will require one column, the "contentcolumn" div would changed to look like the following code. This says that the "contentcolumn" is of the "one_col" class and sets the left margin to 20 pixels. Then you would delete, or comment out, the "leftcolumn" div from the HTML document.

Code:
<div id="contentwrapper">
  <div id="contentcolumn" <span style="font-weight:bold;">class="one_col"</span>>
    <!-- All of your page content -->
  </div>
</div>


While this is a bit more complicated, it keeps all the styling in the style sheet and allows your HTML page to select the style it want's to be.

Browser: Firefox, Internet Explorer

OS: Solaris 10, XP