asked on

css - divide columns on home page with line

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/.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Doug Foster

ASKER

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?

Gary

<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

Doug Foster

ASKER

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