What is the difference between these pages that's causing the problem?

On this list of pages that work and those that do not work, what I'm referring to is that the orange strips on left and right won't reach to the bottom, as they do on the "pages that work". I feel I must be doing something different within the page to make the difference, can you tell me what that is?

Pages that work:
dev2.magickitchen.com/how-to-start.html
dev2.magickitchen.com/gifts.html
dev2.magickitchen.com/meal-plans.html
dev2.magickitchen.com/shipping.html
dev2.magickitchen.com/contact.html
dev2.magickitchen.com/catalog.html
dev2.magickitchen.com/newsletter.html
dev2.magickitchen.com/about.html
dev2.magickitchen.com/guarantee.html
dev2.magickitchen.com/faq.html

Pages that don't work:

dev2.magickitchen.com/index.html
dev2.magickitchen.com/customers.html
dev2.magickitchen.com/menu/main_courses/baby-clam-linguine-marinara.html

That last one is a template page, I'll attach the template. Thanks in advance for your help!
mk-cat-page-MAINS.html
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
In the file you posted there' no css and I can't open the page in the browser to ee how it works and have the ability to explore cs files involved.
If you want help, you have to provide a link to a live page where we can see the problem. Without that, I can only say that probably the element with orange strip (I guess they are borders) has height set to auto and its content is not enough to make the 'orange strips' reach the bottom. In this case you should set the min-height of that element to the most height value among the not working pages.
0
Melody ScottAuthor Commented:
Those are live pages if you add http:// before them. I didn't want to add live links to a site that I don't want the search engines to see.  Css is linked from the live pages.
0
Marco GasiFreelancerCommented:
As I said, just chanhe the height and the min-height of the two sidebar:

in dev2.magickitchen.com/index.html:
<aside style="height: auto; min-height: 3242px;">
<div class="rightSidebar" style="height: auto; min-height: 3242px;">

dev2.magickitchen.com/customers.html: min-height: 1584px

dev2.magickitchen.com/menu/main_courses/baby-clam-linguine-marinara.html: min-height: 1320px

But maybe you can be interested in following this small tutorial about columns' height: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Melody ScottAuthor Commented:
Thanks.. when I select those sidebars on index.html in Firebug, I see:
element.style {
    height: 3217px;
    min-height: 3217px;
}

Usually element.style means it's inline, but I can't find it in index.html. On the others, same thing, I see it in firebug but can't find it in the document.
0
Melody ScottAuthor Commented:
I've done a search of source code on entire site, and can't find min-height: 3217px;, min-height: 3242px; min-height: 1584px. I'm just not sure where to find it, although you are obviously right.
0
Marco GasiFreelancerCommented:
Evidently those value are set by a javascript. Tomorrow I'll try to see what happens... Though I find very unusual that the height of a layout structural element be set via javascript. Usually this happens for slideshows or other element involved in some animation...
0
Marco GasiFreelancerCommented:
Well. Let me say things step by step.
1. here the javascript code which sets elements' height:
function sidebarHeightCalculation(){
	if($(window).width() > 991){
		var SidebarHeight = $('.contentWrapper').height();
		$('aside, .rightSidebar').css({'height':SidebarHeight});
	}else{
		$('aside, .rightSidebar').css({'height':'auto'});
	}
}
$(window).load(function(){
	sidebarHeightCalculation();
});	

$(window).resize(function(){
	sidebarHeightCalculation();
});	
	
	
	function rightsidebarHeight(){
		if($(window).width() > 767){
			$('.rightSidebar, aside').css({'min-height':$('.mainContentsArea').height()});	
		}else{
			$('.rightSidebar, aside').css({'min-height':'inherit'});	
		}
	}
	rightsidebarHeight();

Open in new window

is the first two functions in your app.js.

2. I guess you have got a template and you're using is editing as needed - but not always this is easy to do. Even why not always these templates are well written. Personally, the markup of your pages is too complex without any need: the matra is 'keep it simple'.

3. To solve your problem you can edit the javascript code above changing height values, but personally I just would suppress all that functions and I would hard-code height values.

4. But this is not a corrected solution at all: you should use inline style wich is not a good practice; or you should create specific id selectors to give an height to thos elements, when those elements should be ruled by their classes;

5. What do I'd do, then? I would create a class to give the row the background #ffce65 and I'd use mainContentArea class to set its background to white:

.column-bg{
    background: #ffce65;
}
.mainContentArea{
    background: #fff;
}

Open in new window


Then in your markup:
<section class="contentWrapper">
	<div class="row column-bg">
		<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12"></div>//left column
		<div class="col-lg-8 col-md-6 col-sm-8 col-xs-12 mainContentsArea">
		<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12"></div>//right column
	</div>
</section>

Open in new window

Of course, I would suppress javascript code above anyway.

Try to see if this makes sense for you and if the result is what you want.

Finally, lety me give a partial answer to your original question: 'what is the difference between these pages?'
The difference is in the widgets and iframe you inserted in the not-working pages. It look like widget height is not considered by the browser computing row height. In fact, if you suppress widget (for instance, setting their display property to none) magically columns have the perfect height. This answer is partial because I wasn't be able to find the reason why this happens and what is the most correct way to fix that, but I hope my small workaround can help you.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Thank you so much for the detailed explanation. I will look into this thoroughly tomorrow. I appreciate it very much!!
0
Melody ScottAuthor Commented:
I think this might work very well, thank you! One little problem, the left and right columns are a little wider than I would like. You see that they make the whole body wider than the head and foot. I'm not sure what to do about that.
0
Melody ScottAuthor Commented:
Sorry, the page I'm testing is here: http://dev2.magickitchen.com/test.html
0
Marco GasiFreelancerCommented:
Add to column-bg margin: auto 0;
.column-bg {
  background: none repeat scroll 0 0 #ffce65;
  border-style: solid;
  border-width: 1px;
  margin: auto 0;
}

Open in new window

0
Melody ScottAuthor Commented:
A+++, thanks, Marco!
0
Marco GasiFreelancerCommented:
You're welcome! Glad to help you. :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.