I attempted to create two columns with the same height, but it did not work as expected.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
jQuery(document).ready(function () {
var divone = jQuery(".main-content").height();
var divtwo = jQuery(".sidebar").height();
var maxdiv = Math.max(divone, divtwo);
jQuery(".main-content").height(maxdiv);
jQuery(".sidebar").height(maxdiv);
});
</script>
</head>
<body>
@RenderBody()
<header>
<h1>Document Heading</h1>
<div class="nav">
<ul class="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Sermon", "Sermon", "Home")</li>
</ul>
</div>
</header>
<div class="main-content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div class="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<footer>FOOTER</footer>
</body>
</html>
This setup represents an ASP.NET MVC 4 _Layout.cshtml. The relevant CSS portion is provided below:
body {
font-size: .85em;
font-family: "Segoe UI" , Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
background-color: #CCCCFF;
}
.main-content
{
float: left;
width: 60%;
margin-left: 5%;
}
.sidebar
{
float: right;
width: 35%;
background-color: #00FFFF;
}
footer
{
margin: 0px;
clear: both;
background-color: #FF6600;
font-size: .8em;
text-align: center;
height: 50px;
position: absolute;
bottom: 0;
width: 100%;
padding-top: 20px;
}
Despite using jQuery to make the two columns equal in height, they still display different heights. Any idea why this might be happening?
Update: Check out this fiddle.