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