HTML & Css Help

Discussion in 'Programming' started by jeremywestlake, Feb 1, 2012.

to remove all ads.
  1. jeremywestlake

    jeremywestlake New Member

    Hi there,

    I am trying to make a website similar to 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" "">
    <html xmlns="">
    <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;

    #container #maincontent #rightcontent {
    float: right;
    padding: 10px;
    width: 428px;
    background-color: #999;
    #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;
    #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,;

    <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 id="navigation">Navigation Bar Links Here</div>
    <div id="maincontent">
    <div id="leftcontent">
    <p>Content for id "leftcontent" Goes Here</p>
    <div id="rightcontent">Content for id "leftcontent" Goes Here</div>
    <div id="footer">Content for id "footer" Goes Here</div>
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    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
  3. prasanth

    prasanth Banned

    hi, you have coding is best and two divs are need in your page,
    container div split in the width:100%;
    next two divs are float:left in the code in css,
    float:left to the horizantal div are split in page.
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    So, I ban you on one forum, and you slide over and necropost another?

Share This Page