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

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
Jason_C
New php-forum User
New php-forum User
Posts: 47
Joined: Sat Nov 18, 2006 7:32 am

Sun May 10, 2015 5:01 am

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: Select all

<!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>

User avatar
WebOutGateway
New php-forum User
New php-forum User
Posts: 65
Joined: Mon Jun 13, 2011 9:25 pm
Location: Pasig City, Philippines
Contact:

Thu May 21, 2015 2:49 am

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

johnmacd
New php-forum User
New php-forum User
Posts: 72
Joined: Wed Jun 12, 2013 9:30 pm
Contact:

Fri Apr 08, 2016 4:33 am

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

Post Reply