Cross browser height problem

HTML & CSS
1

Hello,

I’m really a novice in css, still don’t control the rules of everything.

I’m trying to build a landing page and i’m about to finish but 2 colums refuse to get the same height in diffrent browser and I tryed everything.

my code is here:
http://shahal.co.il/yehuda/test/

Thanks

2

What columns are you trying to get the same height? Equal height columns are much easier to fake, than to actuallky get them to be equal heights.

http://www.pmob.co.uk/pob/equal-columns.htm

3

I want it to look like this:

1428×891 206 KB

4

I gave you a link to try and adapt your site to.

Might want to try this technique as well but reverse it for the right column, since the right column image is probably fixed width?

http://www.dzinelabs.com/sandbox/howto/equal_height_no_images.html

5

Hi,

The easiest way to do it for IE9+ is like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.columnwrap {
	margin:0 auto;
	width: 70%;
	display:table;
	table-layout:fixed;
}
.column {
	display:table-cell;
	vertical-align:top;
	width:50%;
	padding:10px;
	background:#ccc;
}
.column2 {
	background:url(http://shahal.co.il/yehuda/test/images/image.png) no-repeat 50% 50%;
	background-size:cover;
}
</style>
</head>

<body>
<div class="columnwrap">
		<div class="column">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra eu dui nec pharetra. Phasellus et elit nisl. Donec tempor scelerisque massa a sagittis. Aliquam dignissim, erat id gravida fringilla, ligula ante convallis ante, non hendrerit ipsum urna nec felis. Aliquam eros lorem, interdum vel metus sit amet, luctus elementum nibh. In efficitur eu lacus nec efficitur. Morbi mattis, enim vel condimentum vehicula, mauris erat pretium tortor, ut consequat nulla sapien sit amet odio. Nam faucibus diam pretium elit venenatis, sed porta risus dictum. Donec sit amet porttitor turpis.</p>
				<p>content</p>
				<p>content</p>
		</div>
		<div class="column column2"></div>
</div>
</body>
</html>

It uses display:table-cell (IE8+) to get equal columns without hacks and then uses background-size:cover (IE9+) on a background image to stretch it over the other cell.