Splitting a page into two columns

[nick04263]

I can't seem to find the answer to my question via search or anywhere online. What I want to do is take a page like say "define_main_page.php" and split the page into two columns.

I know this is possible using tables but to be honest, tables can get very frustrating. It doesn't allow me to vertically align both columns to the top of the page with the VALIGN code. But maybe I am wrong and someone knows how to do this, if so please tell me the coding you used with your table.

What I am thinking about is perhaps there is a way to treat the page as though it were two individual halves and add content as I pleased. I appreciate any help anyone may have.

Thanks,
Nick

I apologize for posting this thread in the Customizing section but it just downed on me that this is the appropriate section for this question.

[kobra]

For defins_main_page.php this is treated with/as html and you first define the table like:

<table width="100%" border="1" align="center" cellpadding="1" cellspacing="0" id="AutoNumber1" style="border-collapse: collapse" class="column">
  <tr bgcolor="#??????" class="ch">
    <td width="50%" align="center"><div align="right"> contents blah blah blah </div></td>
    <td width="50%" align="center"><div align="right">contents blah blah blah  </div></td>
  </tr>      
</table>

Once you get this entered in the plain text mode you shouldd be able to switch to the html editor to see the columns and finish adding and styling the entries

You can also google for html tutorials online

[rstevenson]

For a tableless approach...

In admin/tools/define pages editor, select define_main_page.php and enter something like this...

<div class="home-left">
<h3>A Heading</h3>
<p> .. your text goes here ... </p>
</div>
<div class="home-right">
<h3>Another Heading</h3>
<p> .. your text goes here ... </p>
</div>

Then in the stylesheet...

.home-left {
	height: 1%;
	width: 47%;
	float: left;
}

.home-right {
	height: 1%;
	width: 47%;
	float: right;
}

Adjust the values as necessary. (height: 1%; is an IE hack. )

You can see the result in my site, linked below.

HTH

Rob

[nick04263]

Thank you very much rstevenson,

I had actually figured out how to make the tables work but I don't like relying on them for future modification. I just feel they are outdated and not meant for todays applications. Maybe it is just my feeling on the topic.

Anyway, thank you and thank you for the ie hack as well. I hate ie as well but unfortunately the majority of people still use it. There is something else that is outdated.

[rstevenson]

My main page with the two columns of text displays fine in all the browsers I've thrown at it with one exception: IE5.2 Mac. So if that happens to be a significant part of your visitorship, you may need to stick to tables.

And, of course, tables are still fine for tabular data of many kinds.

Glad I could be of some assistance. I've received so much help here on the forums, it's good to have a chance to give back.

Rob

[MRhum]

where would you find the style sheet for this?
Cheers

[nick04263]

where would you find the style sheet for this?
Cheers

It depends which what template you are using. I made my own template so my Stylesheet is located in:

/includes/templates/"the template I am using"/css

[MRhum]

Cool thanks.

Now to figure where to but the CSS code in the Stylesheet

[nick04263]

Cool thanks.

Now to figure where to but the CSS code in the Stylesheet

It really doesn't matter where you put them in the Stylesheet as long as they have their own lines. But if you want to keep it organized I would suggest putting them under this section:

/*.content,*/

[kobra]

Now to figure where to but the CSS code in the Stylesheet

Normally does not matter as stated but insure that there are not conflicting statements of this tag later in the sheet or the later ones will rule.