I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*@import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
CSS
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
You should try using
display: table-cell;
(this requires a parent element set todisplay: table;
Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table