Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

css - divide columns on home page with line

Posted on 2014-11-30
4
120 Views
Last Modified: 2014-11-30
I have a WordPress/Genesis site with a home page with three columns/widgets.

I put in borders between the "columns" to help separate them visually, but can't get the line to go to the bottom, to the footer. I want the lines to go down to the same spot horizontally.

Is there a way to trick them to do that?

The dev site is at http://uppernyack-ny.us/site1/.
0
Comment
Question by:dougfosterNYC
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40472566
Pop in your footer or somewhere after the jQuery library
<script>
jQuery(function($) {
getmaxheight = Math.max($('#home-middle .wrap aside').eq(0).height(),$('#home-middle .wrap aside').eq(1).height(),$('#home-middle .wrap aside').eq(2).height());
$('#home-middle .wrap aside').height(getmaxheight);
})
</script>

Open in new window

0
 

Author Comment

by:dougfosterNYC
ID: 40472568
ok, that's cool.  the only bummer is that on a mobile device when it is a single column, the gap is there, it doesn't collapse.  

is there a way to have it only do what it does (i can't follow what it is doing) on wide monitors when it has the columns?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472575
<script>
if(jQuery(window).width()>800){ // or whatever width the columns collapse at.
	jQuery(function($) {
		getmaxheight = Math.max($('#home-middle .wrap aside').eq(0).height(),$('#home-middle .wrap aside').eq(1).height(),$('#home-middle .wrap aside').eq(2).height());
		$('#home-middle .wrap aside').height(getmaxheight);
	})
}
</script>

Open in new window

0
 

Author Comment

by:dougfosterNYC
ID: 40472578
Great, thanks, of course...

so, in the end, I put in this code...
<script>

jQuery(function($) {
getmaxheight = 0;
if($(window).width()>800){
getmaxheight = Math.max($('#home-middle .wrap aside').eq(0).height(),$('#home-middle .wrap aside').eq(1).height(),$('#home-middle .wrap aside').eq(2).height());
$('#home-middle .wrap aside').height(getmaxheight);
}})

Open in new window

0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question