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
mel200Asked:
Who is Participating?
 
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
 
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
 
mel200Author 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
mel200Author 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
 
mel200Author 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
 
mel200Author Commented:
Thank you so much for the detailed explanation. I will look into this thoroughly tomorrow. I appreciate it very much!!
0
 
mel200Author 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
 
mel200Author 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
 
mel200Author Commented:
A+++, thanks, Marco!
0
 
Marco GasiFreelancerCommented:
You're welcome! Glad to help you. :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.