Div won't align in different viewing modes

First off, I realize this is a complex question, but I’ve already asked elsewhere and I’ve been fumbling with it for ages so I’m trying my luck here.

My template is pretty basic, but I’m having issues getting certain module positions to align the way I want them to.

The template is 962px wide and has 3 different viewing modes

s-c-s (modules left and right = true)
x-c-s (modules left = false, modules right = true)
s-c-x (modules left = true, modules right = false)

So, if there are no modules activated in left column then that column doesn’t show, etc.

In addition to index and the stylesheet, there’s a php script that switches the style depending on whether the modules are present and if a column should show.

All I’ve been trying to do is change the template from this to this:

Instead of the “showcase” region being placed on top of the left/content/right columns, I’m placing it above left/center with the right column placed next to the showcase and center columns.

So that’s what I’m trying to do, the problem is getting “showcase” to align properly in each viewing template mode. It might align properly for “s-c-s” but be completely off in s-c-x mode, or throw other positions off, etc.

All that said here’s the code: (pm me for a link)

index.php


						<?php endif; ?>
					<div id="colmask" class="ckl-<?php echo $leftcolumn_color; ?>">
						<?php if ($this->countModules('showcase')) : ?>
						<div id="showcase">
							<jdoc:include type="modules" name="showcase" style="none" />
						</div>
						<?php endif; ?>
						<div id="colmid" class="cdr-<?php echo $rightcolumn_color; ?>">
							<div id="colright" class="ctr-<?php echo $rightcolumn_color; ?>">

								<div id="col1wrap">
									<div id="col1pad">
										<div id="col1">
											<?php if ($this->countModules('breadcrumb')) : ?>
											<div class="breadcrumbs-pad">
												<b class="bcrumbtop"><b></b></b>
												<jdoc:include type="modules" name="breadcrumb" />
												<b class="bcrumbbot"><b></b></b>
											</div>
											<?php endif; ?>
											<?php if ($this->countModules('user1 or user2 or user3')) : ?>
											<div id="mainmods" class="spacer<?php echo $mainmod_width; ?>">
												<jdoc:include type="modules" name="user1" style="afterburner" />
												<jdoc:include type="modules" name="user2" style="afterburner" />
												<jdoc:include type="modules" name="user3" style="afterburner" />
											</div>
											<?php endif; ?>
															<div class="component-pad">
												<jdoc:include type="component" />
												<jdoc:include type="modules" name="catalog" style="afterburner" />
												<jdoc:include type="modules" name="techinfo" style="afterburner" />
											</div>
											<?php if ($this->countModules('user4 or user5 or user6')) : ?>
											<div id="mainmods2" class="spacer<?php echo $mainmod2_width; ?>">
												<jdoc:include type="modules" name="user4" style="afterburner" />
												<jdoc:include type="modules" name="user5" style="afterburner" />
												<jdoc:include type="modules" name="user6" style="afterburner" />
											</div>
											<?php endif; ?>
										</div>
									</div>
								</div>
								<?php if ($leftcolumn_width != 0) : ?>
								<div id="col2" class="<?php echo $leftcolumn_color; ?>">
									<jdoc:include type="modules" name="left" style="afterburner" />
								</div>
								<?php endif; ?>
								<?php if ($rightcolumn_width != 0) : ?>
								<div id="col3" class="<?php echo $rightcolumn_color; ?>">
									<jdoc:include type="modules" name="right" style="afterburner" />
								</div>
								<?php endif; ?> 
							</div>
						</div>
					</div>

style.css



.s-c-s #colmid {position:relative; float:left;width:200&#37;;}
.x-c-s #colmid {overflow:hidden;}
.s-c-s #colright {position:relative; float:left; width:100%; left:50%; }
.s-c-x #colright {position:relative; float:left; width:200%; padding:0 0 0 0;}
.x-c-s #colright {position:relative; float:left; width:200%; right:100%; }
.s-c-s #col1wrap {position:relative; overflow:hidden;float:right; width:50%; right:100%; }
.s-c-x #col1wrap {position:relative; background:#ffffff; float:right; width:50%;}
.x-c-s #col1wrap {position:relative; background:#ffffff; float:left; width:50%; left:50%;}

.s-c-s #shownav {width:auto!important;position:relative; overflow:hidden; right:0%;  width:100%;}
.s-c-x #shownav {width:auto!important;position:relative; overflow:hidden; right:0%; width:100%;}
.x-c-s #shownav {width:auto!important;position:relative; overflow:hidden; right:0%; width:100%; }

.s-c-s #col1pad {overflow:hidden;}
.s-c-s #col1 {overflow:hidden;width:100%; margin-top:100px;}
.s-c-x #col1 {overflow:hidden;position:relative;right:100%;background:#ffffff;margin-top:100px;}
.x-c-s #col1 {overflow:hidden;margin-top:100px;}
.s-c-s #col2 {float:left; position:relative; overflow:hidden; margin-left:-50%; margin-top:100px;}
.s-c-x #col2 {float:left; position:relative; padding:0px 5px 0px 0px;margin-top:100px;}
.s-c-s #col3 {float:left; position:relative; overflow:hidden; margin-top:6px;}
.x-c-s #col3 {float:right; position:relative; padding:0px 0px 0px 5px; margin-top:6px;}
.s-c-s .ctr-color1, .s-c-s .ckl-color1, .s-c-x .ckl-color1, .x-c-s .cdr-color1 {background:#fff;}

#showcase {color:#000; margin-top:7px; float:left;}
#showcase h1 {font-weight:normal;font-size:3.0em;line-height:105%;}
#showcase h3 {font-weight:normal;font-size:1.4em;font-weight:normal;}
#showcase b {font-weight:normal;color:#7F8C51;}

utils.php


$leftcolumn_width = ($this->countModules('left')>0) ? $leftcolumn_width : 0;
$rightcolumn_width = (!$editmode and $this->countModules('right')>0) ? $rightcolumn_width : 0;

$col_mode = "s-c-s";
if ($leftcolumn_width>0 and $rightcolumn_width==0) $col_mode = "s-c-x";
if ($leftcolumn_width==0 and $rightcolumn_width>0) $col_mode = "x-c-s";
if ($leftcolumn_width==0 and $rightcolumn_width==0) $col_mode = "x-c-x";

$template_width = 'margin: 0 auto; width: ' . $template_width . 'px;';

$inlinestyle = "
	#wrapper { ".$template_width."padding:0;}
	.s-c-s #colmid { left:".$leftcolumn_width."px;}
	.s-c-s #colright { margin-left:-".($leftcolumn_width + $rightcolumn_width)."px;}
	.s-c-s #col1pad { margin-left:".($leftcolumn_width + $rightcolumn_width)."px;}
	.s-c-s #col2 { left:".$rightcolumn_width."px;width:".$leftcolumn_width."px;}
	.s-c-s #col3 { width:".$rightcolumn_width."px;}
	.s-c-s #shownav { right:".$leftcolumn_width."px;}
	
	.s-c-x #colright { left:".$leftcolumn_width."px;}
	.s-c-x #shownav { right:".$leftcolumn_width."px;}
	.s-c-x #col1wrap { right:".$leftcolumn_width."px;}
	.s-c-x #col1 { margin-left:".$leftcolumn_width."px;}
	.s-c-x #col2 { right:".$leftcolumn_width."px;width:".$leftcolumn_width."px;}
	
	.x-c-s #colright { margin-left:-".$rightcolumn_width."px;}
	.x-c-s #col1 { margin-left:".$rightcolumn_width."px;}
	.x-c-s #shownav { right:".$leftcolumn_width."px;}
	.x-c-s #col3 { left:".$rightcolumn_width."px;width:".$rightcolumn_width."px;}";

Yes send me a link I’m being especially thick today:)

Jason (deathshadow) is usually right in his observations even if he sounds a bit harsh so don’t take it to heart - he sounds like that even when he’s happy :slight_smile:

Near as I can tell the ONLY reason this is complex is you’ve made it unnecessarily so. Not only is it absurdly knee-deep in redundant CSS, you’re wasting time generating tons of static CSS in your PHP – something I wouldn’t even be TRYING to do in the first place. (since IMHO CSS has no place in the markup!)

Admittedly you are trying to control the width of the columns from PHP (lord only knows why) but reducing the code sent would be my first priority…

… and that’s before we talk about switching in and out of parsing mode on almost every line of PHP – that’s /FAIL/ hard. Though of course you’re working in Joomla, which much like Wordpress the only thing you can learn from it is how not to write markup.

This is evident in the half a billion div, dynamic CLASSES on the DIV (whiskey tango foxtrot?), classes on EVERYTHING for no good reason, etc, etc, etc…

I can’t quite make heads nor tails of what it is you are ACTUALLY trying to do given that we’re only seeing a small part of the larger picture.

Send me the link too please :slight_smile:

Funny you’re the second person who asked. It just shows the way the template looks now, next to how I WANT it to work. Does it not make sense?

Might make more sense if I send you a link.

All I’ve been trying to do is change the template from this to this:
https://doc-10-8o-docs.googleusercon…drg7p0feffjaf5

What does that link have to do with anything :slight_smile:

Sorry, but was there some kind of question, or advice you were meaning to put in your message? Or are you just looking to criticize and discourage a guy who’s trying his best to LEARN how to do markup?

Sounds to me like you heavily disapprove of the template I’m using and how I’m going about everything altogether on a deep, personal level. Well, the template works fine (I didn’t make it unecessarily complex, that’s the way it was built), I just want to tweak it to my liking, and from doing so it’s just got a few kinks in the markup, that can be sorted by the right eye. Whether or not the “whole thing” is written the way you think it should be, just keep those opinions to yourself. I’m only looking to finish the 5% that needs to get it working the way I want, not start from scratch.

It is a VERY big picture, but I think I’ve provided enough code to summarize how it works and locate the culprits. People who need more information usually know what to ask for.