I have tried quite a bit to get all three columns to maintain an equal height, yet nothing is working. I need to maintain an equal height when I move the window and get all three columns to look the same even though Column 1 has a lot more context in it than the other two, causing column one to expand more-so than column 2 and 3.
CSS is the first box and html is the second. My actual site has this link: http://web.toolwire.com/croganm-1003/UserInterfaceDesign/Module%204/Index.html
#header {
font-family: "Stencil Std"; /*Easily readable font */
height: 200px; /*Meant to grab readers attention but not outdo the columns*/
width: 780px; /*Most of page but not all of it to create some white space*/
float: none; /* Wanted it to be center aligned*/
background-color: #396; /*Help show where the header is rather than the white backgroud which blended into the page*/
margin-left: auto; /*Center aligned*/
margin-right: auto; /*Center aligned*/
clear: none; /*Center aligned*/
font-size: 80px;
color: #000;
}
#navbar {
background-color: #F90; /* different color to help seperae from other divs */
float: none; /* Center aligned */
height: 30px; /* Not to high to make it look like a navigational meu */
width: 300px; /* Needs to be wide enough to easily fit all the text */
clear: left; /* Want it under the header */
text-align: center; /* Help center navigational options */
margin-top: 30px; /* Some space between header and navbar */
margin-bottom: 30px; /* Some space between columns and navbar */
position: relative; /* Want it placed where it is relative to the html sheet */
margin-left: auto; /* Center-aligned */
margin-right: auto; /* Center aligned */
padding: 10px; /* Space between both the text and the border of the box */
}
.wrap{
display:table;
width: 100%;
height:auto;
}
#column1 {
background-color: #69F; /* Light readable color */
clear: left; /* Placed under navbar */
float: left; /* Box is left aligned */
height: auto;
width: 30%; /* Adjustable width */
padding-right: 1%;
padding-left: 1%;
padding-top: 10px;
margin-bottom: 1%;
display:table-column;
min-height:390px;
}
ul {
margin: 0 0 0 1em;
padding: 0;
}
#column2 {
background-color: #6c9; /* Color contrasts with other two columns */
float: left; /* Makes it stay in the same row as column 1 towards the left side */
width: 30%; /* Adjustable width */
margin-left: 2%; /* Adjustable margin to give space between column 1 and 2 */
margin-bottom: 1%;
padding-right: 1%;
padding-left: 1%;
padding-top: 10px;
clear: right;
position: static;
display:table-column;
min-height:390px;
height: auto;
}
#column3 {
background-color: #69f; /* Same color as first column */
float: left; /* Meant to put it on same row as column 1 and 2 */
height: auto; /* Long enough to contain vital information */
width: 30%; /* Adjustable width */
margin-left: 2%; /* Adjustable margin to give space betwen column 2 and 3 */
margin-bottom: 1%;
padding-right: 1%;
padding-left: 1%;
padding-top: 10px;
clear: right;
position: static;
min-height:390px;
display:table-column;
}
#footer {
color: #000;
background-color: #6f9;
text-align: center;
height: auto;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
position: relative;
bottom: 0px;
font-size: 16px;
font-weight: bolder;
text-decoration: underline;
margin-right: auto;
margin-left: auto;
clear: left;
margin-bottom: 0px;
margin-top: auto;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trainer Depot</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="images/Banner.png" alt="Header for Trainer Depot. Show's a train depot with blue and bold text saying "Trainer Depot"" width="780" height="200" />
</div>
<div id="navbar">
Home|Trainers|Testimonials|Contact
</div>
<div class="wrap">
<div id="column1">
<b><i>"Trainer Depot - what is that?"</i></b><br /><br />Well...<b>Trainer Depot is a service that lets you look up the trainer that you want, and call or email them directly.</b><br /><br /> How do you know what trainer you want? <br /><br />Easy: each trainer profile contains:
<ul>
<li>A Bio</li>
<li>Contact Information</li>
<li>A List of Their Services</li>
<li>Most Importantly, Read Reviews from Their Customers</li>
</ul>
</div>
<div id="column2">
<b><i>Who wants to work with an unknown trainer?</i></b><br /><br />
Not me...and probably not you. <br /><br />
So if you want the best—and <b>LOCAL</b>—trainers, you probably want to use this site.
</div>
<div id="column3">
<b><i>Are you a trainer?</i></b><br /><br />
If you are one, then register with us, and create your profile!<br /><br />
There's only a small fee (<i>for the trainers, not the customers, don't worry!</i>)
</div>
</div>
<div id="footer">
Thank you and call or email if you have any questions. Sincerely, the Web Master at Trainer Depot.
</div>
</body>
</html>
