?
Solved

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

Posted on 2009-12-20
4
Medium Priority
?
170 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:emilysbca
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 26092560
try:
<?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, me, 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: 832px;
     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%;
	float:left;
}

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

#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

0
 
LVL 82

Expert Comment

by:hielo
ID: 26092561
also, refer to the 3 columns tutorial here:
http://www.glish.com/css/
0
 
LVL 17

Expert Comment

by:Mike_Carroll
ID: 26092693
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% }



0
 

Author Closing Comment

by:emilysbca
ID: 31668321
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!  
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month9 days, 15 hours left to enroll

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question