jeremywestlake
New Member
Hi there,
I am trying to make a website similar to http://derbyfarms.com/index.html where I have two columns on the homepage. I have created a wrapper div for each and then a left column div that is floated to the left and a right column div floated to the right. I want to make it so that the two stay equal height and not sure about how to. I am new at coding.
I will post the code to the site below. Thanks for the help.
<!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>Evergreen Equestrian Center</title>
<style type="text/css">
<!--
body {
background-color: #606551;
margin: 0 px;
}
#container #maincontent #leftcontent {
width: 428px;
background-color: #CCC;
padding: 10px;
float: left;
min-height:495px;
}
#container #maincontent #rightcontent {
float: right;
padding: 10px;
width: 428px;
background-color: #999;
min-height:495px;
}
#container {
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#container #header {
width: 900px;
height: 140px;
background-image: url(images/header.png);
}
#container #header #logo {
height: 150px;
width: 150px;
margin-left: 25px;
margin-top: 25px;
position: absolute;
}
#container #header #slogan {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
font-size: 24px;
font-weight: normal;
width: 600px;
margin-top: 60px;
margin-left: 300px;
position: absolute;
background-color: #d8d7c9;
}
#container #navigation {
background-color: #353924;
width: 884px;
font-family: Rockwell, "Century Gothic", Georgia, Arial;
color: #867c48;
font-size: 14px;
text-align: right;
padding-top: 12px;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 8px;
}
#container #maincontent {
width: 900px;
background-color: #FFF;
min-height:495px;
}
#container #footer {
background-color: #838769;
padding: 10px;
font-family: Rockwell, Georgia, "Century Gothic", Arial;
font-size: 14px;
color: #424531;
}
body,td,th {
font-family: Century Gothic,;
}
-->
</style></head>
<body>
<div id="container">
<div id="header">
<div id="logo"><img src="images/logosmall.png" width="150" height="150" /></div>
<div id="slogan">Website Slogan Goes Here</div>
</div>
<div id="navigation">Navigation Bar Links Here</div>
<div id="maincontent">
<div id="leftcontent">
<p>Content for id "leftcontent" Goes Here</p>
</div>
<div id="rightcontent">Content for id "leftcontent" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
I am trying to make a website similar to http://derbyfarms.com/index.html where I have two columns on the homepage. I have created a wrapper div for each and then a left column div that is floated to the left and a right column div floated to the right. I want to make it so that the two stay equal height and not sure about how to. I am new at coding.
I will post the code to the site below. Thanks for the help.
<!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>Evergreen Equestrian Center</title>
<style type="text/css">
<!--
body {
background-color: #606551;
margin: 0 px;
}
#container #maincontent #leftcontent {
width: 428px;
background-color: #CCC;
padding: 10px;
float: left;
min-height:495px;
}
#container #maincontent #rightcontent {
float: right;
padding: 10px;
width: 428px;
background-color: #999;
min-height:495px;
}
#container {
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#container #header {
width: 900px;
height: 140px;
background-image: url(images/header.png);
}
#container #header #logo {
height: 150px;
width: 150px;
margin-left: 25px;
margin-top: 25px;
position: absolute;
}
#container #header #slogan {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
font-size: 24px;
font-weight: normal;
width: 600px;
margin-top: 60px;
margin-left: 300px;
position: absolute;
background-color: #d8d7c9;
}
#container #navigation {
background-color: #353924;
width: 884px;
font-family: Rockwell, "Century Gothic", Georgia, Arial;
color: #867c48;
font-size: 14px;
text-align: right;
padding-top: 12px;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 8px;
}
#container #maincontent {
width: 900px;
background-color: #FFF;
min-height:495px;
}
#container #footer {
background-color: #838769;
padding: 10px;
font-family: Rockwell, Georgia, "Century Gothic", Arial;
font-size: 14px;
color: #424531;
}
body,td,th {
font-family: Century Gothic,;
}
-->
</style></head>
<body>
<div id="container">
<div id="header">
<div id="logo"><img src="images/logosmall.png" width="150" height="150" /></div>
<div id="slogan">Website Slogan Goes Here</div>
</div>
<div id="navigation">Navigation Bar Links Here</div>
<div id="maincontent">
<div id="leftcontent">
<p>Content for id "leftcontent" Goes Here</p>
</div>
<div id="rightcontent">Content for id "leftcontent" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
