Req help properly sizing <div>

[BeccaT]

I am having trouble figuring out the proper CSS/HTML to get the "Contact" div to size properly. I'd like to have it extend down while retaing the same amount of white-space as that which is currently above it. While I'm at it I might also ask direction on getting the "main l" div to extend down to the footer even with no content present. Click Here

Should add, yes, my HTML & CSS skills are a bit sloppy. I'll be paring down a lot of the redundant and useless markup. This is actually a labour of love for a friend and only the second site I've ever built. The first was a CSS site about 6 years ago for the same person and their church band. Definitely my first attempt at a responsive design so any assistance would be much appreciated.

Cheers!

[JorgeM]

To get both divs to have the same height you can do so with JavaScript. Here is some code that you can use:

<script type='text/javascript'>
<!--
onload=function() {
   var divOne = document.getElementById('div1').offsetHeight;
   var divTwo = document.getElementById('div2').offsetHeight;
   if(divTwo>divOne){
      divOne=divTwo;
     document.getElementById('div1').style.height = document.getElementById('div2').style.height = divOne + 'px'
   }
   else
   {
   divTwo=divOne;
   document.getElementById('div2').style.height = document.getElementById('div1').style.height = divTwo + 'px'
   }
}
//-->
</script>

[BeccaT]

Thanks JorgeM, much appreciate the reply.

My hope was to accomplish it with CSS alone. Even with the many techniques I've found I just can't seem to get any working properly. In the end I may have to resort to Java so thanks for the script.

Cheers!

[JorgeM]

Not a problem. I am not an expert by any means, but I do not see how this would be accomplished using CSS alone.

[BeccaT]

Ok, been able to make a little headway using CSS only. Click Here Coding is still a bit sloppy as I've made so many changes in an attempt to get this working. Thusfar the "contact" div is basically doing what I need but there are a few things you may be able to help clear up.

1. Adding border-style:double to the "contact" div has the effect of inducing a 1px-2px margin. This is causing unwanted whitespace which I seem not to be able to remove. Possible?

2. As of yet I couldn't get this same coding to work on the main container divs. Seems like I've tried every combination with no effect aside from occasionally breaking the layout.

From what I have read it seems display:table is frowned upon but this is the very simple code I borrowed:

#container {
display: table;
}
#content {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

I'll keep cracking at it but if anyone would like to add some enlightenment I'm all ears. ;-)

[BeccaT]

Please disregard #1 in the previous post. I simply overlooked using a "white" border which made me forget the outermost border was even there hence the extra 2px.

[JorgeM]

So, what are you stuck on at this point?

[BeccaT]

Hi JorgeM,
Appreciate the reply. Actually, I'm not sure. Been working on this so much I'm going buggy and am having a hard time keeping track. I just noticed that I was in error saying the code above produced the desired full column height for the "contact" div. Looking at the code I now see I do have a height value declared. Not what I was actually wanting to do but it actually suites this design well as he prefers the "contact" div to remain dominant even at mobile device sizes.

As for the "main content" (left column), that's the one I was hoping to get full height functionality using the above code but found that elusive. In the end this site will not be updated all that often so setting div height using manual means will be of little inconvenience. That said I think the site design is basically finished, just awaiting actual content to insert.

Thanks for the assistance!

[JorgeM]

So if the content is static, I would agree that adding JavaScript to size the DIVs is unecessary and adds more code to the page which in turn impacts the peformance of the page loading to completion.