asked on

CSS 3 column layout 2nd and 3rd columns begin at bottom left of previous column

I have searched but haven't exactly found a solution to this.

I have a 3 column static layout. It took some doing to get the columns to butt up against each other with no space in between. But now each column "steps" down from the one previous to it. Only the left column is where it should be. http://www.sojournercafe.com/indexColumns.html

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Sojourner Cafe, nourishing body and soul since 1978 in Santa Barbara CA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--<link href="/soj.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
<!--
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
	margin: 0;
	padding: 0; 
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
	list-style: none; 
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
/* Removes list-style from lists */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
	border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
	text-align: left;
}
/* Removes quotation marks form q */
    q:before, q:after {
    content: '';
}
/* normalizes links */
a:link {
   text-decoration: none;
   color: #6b9d98;
}
a:hover {
    color: red;
}
a:visited {
   text-decoration: none;
   color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
	background-color: #E6DFCC;
		
}

body {
     font-family: Georgia, Times New Roman, Times, serif;
	 color: #4F2020;
	 text-align: left;
	 position: relative;
	 height:100%;	 	 
}

#allcontent {
     width: 820px;
     margin-left: auto;
     margin-right: auto;
	 margin-top: 50px;
     border: 3px solid yellow;
     height: 745px;

}

#leftcontent {
     position: relative;
     left: 0px;    
     width: 160px;
     background: #D5BA95;
     border: 1px solid #000000;
	 height: 100%;
}

#centercontent {
     position: relative;	 
     background: #F5F5E3;    
     width: 480px;
     margin-left: 160px;    
     border: 1px solid blue;
	 height: 100%;
     
}

#rightcontent {
     position: relative;
	 margin-left: 640px;	 
     right: 0px;     
     width: 180px;
     background: #AA968E;
     border: 1px solid red;
	 height: 100%;
}
-->
</style>
</head>
<body>
<div id="allcontent"> 
  <div id="leftcontent"> 
    <ul>
      <li>Menu</li>
      <li>Specials</li>
      <li>Daily Desserts</li>
      <li>Art Shows</li>
      <li>Contact Us</li>
      <li>Special Offers</li>
      <li>Links</li>
    </ul>
  </div>
  <!--end leftcontent-->
  <div id="centercontent"> <img src="/images/logo.jpg" />
    <p class="body">Welcome to the Sojourner Restaurant & Caf&#233;, serving unique 
      dishes created with wholesome natural ingredients for over 30 years. and 
      we were chosen to participate in the City of Santa Barbara&#39;s successful 
      pilot composting program.</p>
  </div>
  <!--end centercontent-->
  <div id="rightcontent"> THE GIFT THAT KEEPS ON GIVING </div>
  <!--end rightcontent -->
</div>
<!--end allcontent-->
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hielo

also, refer to the 3 columns tutorial here:
http://www.glish.com/css/

Mike_Carroll

Take out the position:relative for all. Define the left column and float:left, define the right column and float:right, define the centre column with left and right margins equalling the widths of the left and right columns. Define them in this order too.

For example:

#content_outer { width: 100%; background: #555555; height: 100% }
#col1 { float: left; width: 220px; margin:0; height: 100% } /* LEFT */
#col2 { float: right; width: 220px; margin:0; height: 100% } /* RIGHT */
#col3 { width: auto; margin: 0 220px 0 220px; height: 100% } /* CENTRE */
#col1_content { background: #666666; height: 100% }
#col2_content { background: #777777; height: 100% }
#col3_content { background: #888888; height: 100% }

emilysbca

ASKER

Thank you! I'm still pretty new to CSS, knowing what to leave out seems to be just as important as what to put in!