Three Column Layout

[cregy]

Hi

I want to put together a three column design where the usual left and right columns sit together to the right of the centre column. i.e.

Usual:
left centre right

Needed:
centre left right

Is this possible please? I really need to know if it is possible - I'll have a go if it is! If there is tutorials that might help - excellent.

Many thanks.

Rich

P.S. Centre is definitely spelt centre!

[Kim]

Rearrange the columns in your tpl_main_page.php

[kuroi]

Kim's shown where ... here's one possible how.

[cregy]

Hi

Thanks for the replies so far! If you take a look at:
http://www.nanadobbie.com/index.html
You will see what we hope to achieve!

Now take a look at:
http://www.nanadobbie.com/index.php
It is starting to get there but things won't stay in their columns. I think if you look at my code it has something to do with the div called wrapper. Not sure quite where to place this. Any ideas please?

Thanks

Rich

P.S. Peter - I'm getting more adventurous! I'll send the erp stuff through tomorrow hopefully.

[cregy]

Hi

On one step. I can see I have to play with tpl_main_page.php. i.e. Re-ordering of columns etc. I'm just a little unsure of the php. Don't want to go breaking it!

If I move blocks of divs in one go will that break the php. e.g.

<td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<?php
/**
* prepares and displays left column sideboxes
*
*/
?>
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td>
<?php
}
?>
<td valign="top">
<!-- bof breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
<div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

<?php
if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
?>

<!-- bof upload alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<!-- eof upload alerts -->

If so, I will be able to sort it out, I think! Still would appreciate a little help though please!

Thanks

Rich

[cregy]

Hi Guys

OK - as you can see I have got quite a bit further on. However, if we click on a category link the footer does something weird.

Any ideas why please?

Thanks

Rich

[kuroi]

As you say, you have moved this forward a long way, but the XHTML is a bit off. There are some tags closing non-existent table cells and a quick glance suggests that your wrapper div is closed after the "centre" column. Also there are different positioning types being mixed here, some are in the document flow and others have been floated out of it.

To clean it up I recommend making sure that wrapper goes around all three columns but is closed before the footer, then inserting a <br /> tag between the wrapper and the footer and ensuring that it clears everything. This will have the effect of reseting your document flow from that point and preventing the footer from going searching for free space higher up, when your centre column is short.