Spacer DIV

[DoubleDee]

In the past, all of my web pages had a Page Header which included things like my Company Name, Log-In Prompts, and a Navigation Bar. Then below that was a Left Column, Middle Column, and Right Column.

To space things out, I simply had a bottom-margin on the Page Header.

Now on to the problem…

Recently I added a “Section Title” (e.g. “Finance: Managing Your Business’s Money”) to my Section page.

Because of this addition, I found is easier to just strip any Margins or Padding from the Page Header or Left/Middle/Right Columns, and add any spacing to this new “Section Title”.

Well, that worked great, but now on pages where there is no “Section Title”, the Page Header and Left/Middle/Right Columns are snug up against each other. (BTW, things are more complicated than this, but short of posting TONS of code, I’m doing my best to explain things?!)

So, long story, short, I am thinking it would be easiest if I could just stick a “Spacer DIV” in the couple of pages were there is no “Section Title”, but where I need to maintain the same spacing across pages.

Would it be some horrible, evil sin to have a “Spacer DIV” in some pages?? :-/

(BTW, the key point to all of this is that I am REUSING the Page Header and Left/Middle/Right Columns, and I want to avoid having TWO SETS of everything to accommodate for this issue.)

Hope that makes sense?!

Sincerely,

Debbie

[DoubleDee]

An after-thought…

In the past, all I had was a Page Header followed by my Left/Middle/Right Columns.

But then I added “Breadcrumbs” and a “Section Heading” to give me a clear <h2> for each page.

The problem is that some pages like my Home Page do NOT have a Breadcrumb or a “Section Heading”.

Hope I am making sense… (:

Debbie

[meanweaver]

Why not have a slightly different template for your Section page sounds like you may be over complicating things, sorry if I have mis-read your post.

I presume your using a static type website and that this template is not built into any CMS.

Cheers

[DoubleDee]

@meanweaver

Why not have a slightly different template for your Section page sounds like you may be over complicating things, sorry if I have mis-read your post.

As I said above, because I am “including” the different parts, and I am trying to avoid needing 2 Headers, and 2 Left Columns and so on.

I presume your using a static type website and that this template is not built into any CMS.

Wrong.

Debbie

[meanweaver]

Oh sorry I did misread, well next thought would be add a div which is positioned absolute to hold the content for the Breadcrumbs Section Heading.

For info the sites I have are built using the MODX framework and there is a way of putting a conditional statement in the template so if an end user does not fill in for example section header then whatever holds that content in place does not get inserted into the template.

Anyway that’s not helping maybe post your template or a link to an example page might help.

Cheers

[dresden_phoenix]

The optimal thin would be to have CSS target the elements selectively. Am assuming you want the to be between the header and everything else.

<header></header>
<div class="stuff"></div>

or

<header></header>
<h2>Section Title<h2>
<div class="stuff"></div>

then you could do:

.stuff, h2{ margin-top: 0; } /** in case you dont have have the .stuff margin-top normalized elsewhere */
header + h2, header + .stuff { margin-top: 50px; }

just note, that if you are using EMs you may need to break that into two different rules …

eg.:

header + h2 { margin-top: 2.5 em; font-size:200% }
 header + .stuff { margin-top: 5em;  font-size:100%}

hope that helps

[ralphm]

@DoubleDee

Would it be some horrible, evil sin to have a “Spacer DIV” in some pages?

Indeed it would. I agree with Ray above, that you can set different margins depending on what follows the header. Stick with that.

[DoubleDee]

@dresden_phoenix

The optimal thin would be to have CSS target the elements selectively. Am assuming you want the to be between the header and everything else.

header + h2 { margin-top: 2.5 em; font-size:200% }
 header + .stuff { margin-top: 5em;  font-size:100%}

hope that helps

I guess you are referring to the “Adjacent Sibling Selector”??

If so, it doesn’t sound like it is supported all that well…

Sincerely,

Debbie

[ralphm]

@DoubleDee

it doesn’t sound like it is supported all that well…

Don’t worry. It’s fully supported. IE6 is is long gone now.

[DoubleDee]

@ralph_m

Indeed it would.

You’re not making this any easier on me, Ralph?!

Okay, look, here is some code…

index.php

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">

			<!-- PAGE HEADER -->
			<div id="pageHeader">
				<!-- COMPANY BRANDING -->
				<!-- WELCOME MESSAGE -->
				<!-- TOP MENU -->
			</div>

			<!-- SECTION HEADING --><!-- I need this to create spacing between the Page Header and Left/Middle/Right Columns -->
			<div id="spacer"></div>

			<!-- LEFT COLUMN -->
			<div id="pageLeftCol">

			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_3">

			<!-- RIGHT COLUMN -->
			<div id="pageRightCol">

index_section.php

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			
			<!-- PAGE HEADER -->
			<div id="pageHeader">
				<!-- COMPANY BRANDING -->
				<!-- WELCOME MESSAGE -->
				<!-- TOP MENU -->
			</div>

			<!-- BREADCRUMB -->
			<p id='breadcrumb'><a href='/'>Home</a> > Finance</p>

			<!-- SECTION HEADING -->
			<div id="sectionHeading"><h2>Finance: <span>Managing Your Business's Money</span></h2></div>

			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_2">

			<!-- RIGHT COLUMN -->
			<div id="pageRightCol">

index_subsection.php

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			
			<!-- PAGE HEADER -->
			<div id="pageHeader">
				<!-- COMPANY BRANDING -->
				<!-- WELCOME MESSAGE -->
				<!-- TOP MENU -->
			</div>

			<!-- BREADCRUMB -->
			<p id='breadcrumb'><a href='/'>Home</a> > <a href='/finance/'>Finance</a> > Economy</p>
			
			<!-- SECTION HEADING --><!-- Use this to maintain spacing that is lost since there is *no* Section Heading here -->
			<div id="spacer"></div>

			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_2">

			<!-- RIGHT COLUMN -->
			<div id="pageRightCol">

article.php

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			
			<!-- PAGE HEADER -->
			<div id="pageHeader">
				<!-- COMPANY BRANDING -->
				<!-- WELCOME MESSAGE -->
				<!-- TOP MENU -->
			</div>

			<!-- BREADCRUMB -->
			<p id='breadcrumb'><a href='/'>Home</a> > <a href='/finance/'>Finance</a> > <a href='/economy/'>Economy</a> > Best Cities for Small-Business</p>
			
			<!-- SECTION HEADING --><!-- Use this to maintain spacing that is lost since there is *no* Section Heading here -->
			<div id="spacer"></div>

			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_2">

			<!-- RIGHT COLUMN -->
			<div id="pageRightCol">

As you can see, because I am using the same code structure across pages, I really don’t have any easy “hooks” like I typically do have once I get into the page details inside of <div id=“pageMidCol_2”>…

Hope that helps explain things better…

Sincerely,

Debbie

[ralphm]

This would probably be a lot more straightforward if there were a wrapper around the columns, which is what I would advise anyway.

[DoubleDee]

@ralph_m

This would probably be a lot more straightforward if there were a wrapper around the columns, which is what I would advise anyway.

You’re losing me mid-thought, Ralph…

Debbie

[ralphm]

You have columns … floated … right? Placing a container div around them would make it easier and neater to achieve what you want.

[DoubleDee]

@ralph_m

You have columns … floated … right? Placing a container div around them would make it easier and neater to achieve what you want.

Okay, I took a guess at what you meant, and yes, that did make things easier. (Although I hate adding more complexity to my already intense layout.)

Thanks for the tip and helping me eliminate that pesky “Spacer DIV”!

Sincerely,

Debbie