SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    UK
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    three column layout.. (thick newbie sorry)

    I have a three column layout, you can look at it by clicking here

    However, I have a problem with the left and right hand columns not being long enough to encompas the middle section, especially on the products page.

    At the moment I have the column heights set to 600px, but want them to automatically size to accommodate any length of content in the middle section.

    Here is my css...

    Code:
    /* re-define standard tags */
    
    body {
    	margin: 0;
    	padding: 0;
    	font-family: Georgia, Arial, Verdana, sans-serif;
    }
    
    a {
    	text-decoration: none;
    	border-bottom: 1px dotted;
    	color: #293E53;
    }
    
    a:hover {
    	text-decoration: none !important;
    	border-bottom: 1px solid;
    	color: #FF3300;
    }
    
    a:visited {
    	text-decoration: none;
    	border-bottom: 1px dotted;
    	color: #595950;
    }
    
    /*redifine each ul for coloured boxes */
    
    .bullet_orange{
    	list-style: disc url(../images/bullet_orange.gif);
    }
    
    .bullet_green{
    	list-style: disc url(../images/bullet_green.gif);
    }
    
    .bullet_red {
    	list-style: disc url(../images/bullet_red.gif);
    }
    
    .bullet_brown {
    	list-style: disc url(../images/bullet_brown.gif);
    }
    
    .bullet_blue {
    	list-style: disc url(../images/bullet_blue.gif);
    }
    
    /* #wrap */
    div#wrap {
    	position: relative;
    	width: 746px;
    	margin: 15px auto;
    }
    
    
    div#header {
    	border-right: 6px solid #660000;
    	width: 740px;
    	height: 142px;
    	float: left;
    	margin: 0px;
    	padding-bottom: 6px;
    	padding: 0px;
    	border-top: 1px solid #4D4D45;
    }
    
    div#footer {
    	border-right: 6px solid #660000;
    	width: 740px;
    	height: 42px;
    	float: left;
    	margin: 0px;
    	padding-top: 6px;
    	padding: 0px;
    	border-bottom: 1px solid #4D4D45;
    	background-color: #fcfcfc;
    }
    
    div#footer p {
    	font-size: 10px;
    	line-height: 16px;
    	color: #333333;
    }
    
    div#left {
    	float: left;
    	width: 159px;
    	height: 600px;
    	margin: 0px;
    	padding: 0px;
    	padding-top: 10px;
    	border-right: 1px dotted #CCCCCC;
    	left: 0px;
    	top: 6px;
    }
    
    div#main {
    	float: left;
    	margin: 0px;
    	padding-left: 10px;
    	padding-right: 10px;
    	padding-top: 10px;	
    	width: 440px;
    	height: 600px;	
    	left: 160px;
    	top: 6px;
    }
    
    div#main p {
    	font-size: 11px;
    	line-height: 16px;
    	color: #333333;
    }
    
    div#right {
    	border-right: 6px solid #660000;
    	border-left: 1px dotted #CCCCCC;
    	float: left;
    	padding: 5px;
    /* if width is 120px, minus padding left+right (5+5px) */	
    	width: 109px;
    /* if height is 400px, minus padding top+bottom (250px+5px) */	
    	height: 600px;	
    	font-size: 9px;
    	vertical-align: 100%;
    }
    
    div#main h1 {
    	font-family: Georgia, Arial, verdana, sans-serif;
    	font-size: 16px;
    	color: #494975;
    }
    
    /* Style for product boxes etc... */
    
    div#thumbcontainer {
      border: 1px dotted #CCCCCC;
      background-color: #fcfcfc;
    }
    
    div#thumbspacer {
    	clear: both;
    }
    
    div#thumbs {
      float: left;
      padding-left: 25px;
    }
      
    div#thumbs p {
       text-align: left;
    }
    
    div#thumbcontainer h1 {
    	font-family: Georgia, Arial, verdana, sans-serif;
    	font-size: 14px;
    	color: #494975;
    	padding-left: 15px;
    }
    Anyone know how to do this?

    Also, I would like to align the content of the right hand column to the bottom, any ideas on this?

    I've been told that Sitepoint users are the most intelligent on the internet, so surly someone must have an answer!

    Cheers guys.

    Jon.

  2. #2
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    572
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this excellent thread by PAUL http://www.sitepoint.com/forums/showthread.php?t=143801

    This will help you!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The techniques you need are mentioned in the thread kindly pointed out above

    An easy way of equalising your column borders would be to simply use a background gif with the two borders already drawn (as you have a fixed width it should be easy to place). Make an image the width needed with the borders at the end (approx 462px x 5px) then repeat it won the y-axis of the main container so that it always stretches with content to provide the illusion of 3 columns.

    To put content at the bottom of something you can absolutely place it there. Put position:relative on the parent and then absolutely place the element at the bottom.

    Of course you will need to make sure that nothing overlaps the absolutely placed element (use padding or some other method to keep the space clear).

    A lot of the techniques you will need can be seen in my demo and there is also some info in the FAQ.

    Hope that helps,

    Paul


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
  •