how to get equal height for both left and right div column

A

Anonymous

Guest
I have been trying all sorts to get the columns to be the same height, but still nothing is working...

Is there something that I am missing that is so obvious to get this to work ?


I know I have placed the css in the html and it is best in its own stylesheet, but this is just so I could test the code out while trying different things out.

I have found a few sites that suggest using an overlay method where the right side overlays the background that is 100%. But this will not work for me as I wish to have rounded borders on both columns. Also when the page is reduce (responsive) I would like the right side column to drop underneath the left column.

Code: 
<!DOCTYPE html>
<html lang="en">
<head>

<style type="text/css">
#container { width: 1300px; margin: 0 auto; padding: 0em; border: 0px solid #fff; }

#leftInner {	float: left; width: 36%; min-width: 580px; max-width: 580px; background-color:#ffffff; border: 3px solid #22566B; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; padding: 5px; margin: 0px 5px 0px 5px; margin-bottom: 10px; }

#rightInner {	float: left; width: 56%; min-width: 580px; max-width: 580px; background-color:#ffffff; border: 3px solid #22566B; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; padding: 5px; margin: 0px 5px 0px 5px; margin-bottom: 10px; }

.clearFloat { clear: both; }

</style>

<title>Home</title>
</head>
<body>
		<div id="container">
								<div id="leftInner">
								aaa<br>
								aaa<br>
								aaa<br>
								aaa<br>
								</div>
													<div id="rightInner">
													aaa<br>
													aaa<br>
													aaa<br>
													aaa<br>
													aaa<br>
													aaa<br>
													aaa<br>
													</div>
		<div class="clearFloat"></div>
		</div>
</body>
</html>
 
If the only problem is to make it in the same height why you don't put an exact content to each div?
but to be honest I don't understand what is your exact point. :D
 
Hi,


Try this:

.main .container {
padding-right: 330px;
overflow: hidden;
}
.content {
float: left;
width: 100%;
background-color: #fff;
}
.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: #fff;
}
.content,
.sidebar {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
section,
aside {
padding: 30px
}

Thanks
 
You must log in or register to reply here.
Back
Top