SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Huntington Beach, CA
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with 2 different column lengths

    Hi everyone!

    I am attempting to put together my first 100% <div>/CSS driven website for a new client but I am running into a small problem.

    I have a main content area with 2 div's inside there for content. The problem i am running into is depending on the page, sometimes one content are will stretch further down the page than another and vice versa. I want them both to hit the footer no matter what.

    To make things easier I will show you my code. I think I am doing things correctly.

    My page code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tom Silk</title>
    <link href="includes/style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="main">
    	<div id="head">
    		<div id="head-text"><a href="contact.php">Contact</a></div>
    	</div>
    
    	<div id="nav"><a href="index.php">Home</a> | <a href="gallery.php">Gallery</a> | <a href="guest-book.php">Guestbook</a> | <a href="links.php">Links</a></div>
    	<div id="inset">
    		<div id="main-pic"></div>
    		<div id="feature">
    
    		  <p class="update-head">UPDATES</p>
    		  <p class="update-date">7/14/2006</p>
    		  <p class="update-text">This is where you can write some feature stuff, maybe some news about some new image sets, or some other things.</p></div>
    	</div>		<div id="content">
    		<div id="main-content">
    		  <h1>Welcome to Tom Silk Photography </h1>
    
    		  <p>Born, raised and educated in Southern California, I now reside in Irvine, Orange County, California. Through my photography and earlier paintings and drawings, I have always strived to celebrate the male physique as an art form. In the black and white medium, drama and interest are created by the use of strong light and shadow. Color images blend man with nature creating a strong, artistic effect. Informal, playful and casual images in a garden, pool or other outdoor setting are also done in color as well.</p>
    		  <p>Travel has often taken me abroad, and I have had the good fortune to capture my impressions of the world on film. In this subject, my goal is to capture the feel of the everyday person and ordinary street scenes, turning them into exciting images. By studying the minutia of an area, it is possible to suggest the greater picture.</p>
    		</div>
    		<div id="content-right"></div>
    	</div>
    	<div id="foot">&copy; 2006 Tom Silk Photography<br>Designed by <a href="http://piermarketing.com">Pier Marketing</a></div></div>
    
    </body>
    </html>
    My CSS code:
    Code:
    body, html {background-color: #655E05;
    	background-position:top;
    	background-repeat:repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	clear: both;
    	}
    h1 {font-family:Geneva, Arial, Helvetica, sans-serif;
    	color:#000000;
    	font-size:14px;
    	line-height:125%;
    	padding:5px;
    	font-weight:bold;
    	}
    p {font-family:Geneva, Arial, Helvetica, sans-serif;
    	letter-spacing: 1px;
    	color:#000000;
    	font-size:12px;
    	line-height:125%;
    	padding:5px;
    	margin-left: 10px;
    	}
    #main {width: 760px;
    	height:100%;
    	min-height: 100%;
    	position:relative;
    	margin-top: 20px;
    	margin-bottom: 20px;
    	margin-left: auto;
    	margin-right: auto;
    	}
    #head {background-image: url(../images/head.jpg);
    	width:760px;
    	height:170px;
    	}
    #head-text {font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	width: 100px;
    	color: #FFFFFF;
    	text-align:right;
    	margin-top: 50px;
    	padding-right:10px;
    	float:right;
    	}
    #head-text a {text-decoration:none;
    	color:#FFFFFF;
    	}
    #head-text a:hover {text-decoration:none;
    	color:#663300;
    	background-color:#FFFFFF;
    	}
    #nav {width:750px;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-weight:bold;
    	margin-top: 0px;
    	background-color: #CC9933;
    	padding:5px;
    	letter-spacing: 1px;}
    #nav a {text-decoration:none;
    	color:#FFFFFF;
    	}
    #nav a:hover {text-decoration:underline;
    	color:#FFFFFF
    	}
    #inset {width:760px;
    	height:250px;
    	border-bottom: 5px solid #000000;
    	}
    #main-pic {background-image:url(../images/main.jpg);
    	height:250px;
    	width:550px;
    	float:left;
    	}
    #feature {float: right;
    	width:200px;
    	height:240px;
    	padding: 5px;
    	background-color:#000000;
    	}
    .update-head {	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-size:14px;
    	font-weight:bold;
    	}
    .update-date {	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-size:14px;
    	}
    .update-text {	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-size:12px;
    	}
    #content {width:760px;
    	height: 100%;
    	min-height: 100%;
    	}
    #main-content {
    	width:550px;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	background-color:#FFFFFF;
    	float:left;
    	position:relative;
    	}
    #main-content a {color:#666666;
    	text-decoration:none;
    	}
    #main-content a:hover {color:#666666;
    	text-decoration:underline;
    	}
    iframe { border: 0px;
    	height: 100%;
    	width: 550px;
    	}
    #content-right {
    	background-image:url(../images/img-right-2.jpg);
    	background-position: bottom;
    	background-repeat:no-repeat;
    	background-color:#000000;
    	width: 210px;
    	float: right;
    	height: 300px;
    	min-height: 100%;
    	position: relative;
    	}
    #form { margin: 10px;
    	}
    #form-field {font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	padding: 5px;
    	text-align:right;
    	margin-right: 175px;
    	vertical-align:top;
    	}
    .button { font-family: Helvetica;
    	background-color:#663300;
    	color:#FFFFFF;
    	margin-left: 225px;
    	font-size: 10px;
    	}
    #foot {width:750px;
    	background-color:#000000;
    	color:#999999;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-align: center;
    	padding: 5px;
    	float:left;
    	}
    #foot a {text-decoration:none;
    	color: #DDC515;
    	}
    #foot a:hover {text-decoration: underline;
    	color: #DDC515;
    	}
    and you can see an example here: http://http://s171470695.onlinehome.us/index.php

    Any help is greatly appriciated!

    Rob

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •