HTML & Css Help

jeremywestlake · 02-01-2012, 07:34 AM

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

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

Phreaddee · 02-01-2012, 07:58 AM

For a start you will need to put the right div first in the html.
Add the background to the container, repeat-y, overflow:hidden

02-01-2012, 07:34 AM	#1
jeremywestlake New Member Join Date: Feb 2012 Posts: 2	HTML & Css Help 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>

02-01-2012, 07:58 AM	#2
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	For a start you will need to put the right div first in the html. Add the background to the container, repeat-y, overflow:hidden __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode