You need to use some hacks to make 2 divs equal height. You can't say height 100% of parent div.
There is a lot of them on the web, including jQuery, the popular js framework.
Hi I tried this and this is a good hack.
However I have a left div with 2 divs in it and a right div with 2 divs in it. It will make all the divs equal height or if I code the 2 bottom divs it will make the the same height.
But because the right div is higher up the top of the browser there is still a difference and it make it the same height.
Is there a CSS hack that might do this?
Kind of hard to explain. It makes the divs equal height at the bottom but the 2 divs are different from the top
Not quite understanding what you're aiming at...in FF... it looks fine. In IE6 looks fine... Except on the Home page... the CMD button is a png with transparency which IE6 does not recognise... leaves a solid bit around the transparency part... should be ok in IE7 and above though...
What if you take out your explicit height in your #casebox_web_design ?
On this page and other pages except the home page
I have 2 columns left and right.
On the left colums there are 2 boxes (text box and then the image display) and the right hand column there are 2 boxes (subscribe to newsletter and case study)
I want the 2 columns (image display and case study) to line up at the bottom flush with FF and IE. I cannot acheive this. If I set a height on either FF or IE on each page this is fine I can do this but there is around a 10px - 15px difference between the colums because of the FF and IE thing.
Eg if I set the height for FF to be flush bottom to case study box will line up perfectly with the bottom of the image box but in IE this will overhang by around 10-15px.
I need to find a hack to make these the same across the browser platforms.