SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    another 100% height question

    i tried the code that was given in the FAQ on top here but couldn't get it to work.

    now bear with me please as the site i'm trying to get this to work uses tables

    http://www.karinne.net/amnesia/

    i need to get the orange on the sidebar to go all the way down and the same for the light orange in the content if ever the sidebar is longer.

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

    I don't think you'll be able to do it the way you want as 100% height won't be inherrited into subsequent divs (as explained in the faq ).

    You'll have to use the table cell itself as thats what tables do. Move the images and backgrounds from the div to the cell. Of course you will loose the black border but you may be absle to fiddle something.

    I've just done this quickly and it seems to give the columns like you want although you may need to tweak other settings.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Amnesia :: RushOfBlood</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="/amnesia/css/masters.css" />
    <style type="text/css">
    html, body, td {
     scrollbar-face-color:#efefef;
     scrollbar-highlight-color:#efefef;
     scrollbar-3dlight-color:#666666;
     scrollbar-darkshadow-color:#666666;
     scrollbar-shadow-color:#efefef;
     scrollbar-arrow-color:#666666;
     scrollbar-track-color:#efefef;
     margin: 0;
     padding: 0;
     background-color: #666;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
    }
    #centerit {
     margin: auto;
     width: 90%;
    }
    table {
     border-collapse: collapse;
     width: 100%;
     min-height: 100%;
     height: auto;
    }
    p {
     margin: 0 0 5px 0;
    }
    /* --- header info
    ----------------------------- */
    #header {
     width: 90%;
     height: 50px;
     margin: auto;
     background-image: url(http://www.karinne.net/amnesia/images/logo.jpg);
     background-position: center right;
     background-repeat: no-repeat;
    }
    /* --- columns
    ----------------------------- */
    #c1 {
     vertical-align: top;
     border-top: 3px solid #fff;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
     min-height: 100%;
     height: auto;
     width: 27%;
     padding: 3px;
     background:#f7941d url(http://www.karinne.net/amnesia/images/side-bg.jpg) repeat-y left top;
    }
    #col1 {
     padding: 0 0 0 20px;
     margin: 0;
     min-height: 100%;
     height: auto;
    }
    #c2 {
     vertical-align: top;
     border-top: 3px solid #fff;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
     min-height: 100%;
     height: auto;
     width: 70%;
     padding: 3px;
     background:#f9e3bd url(http://www.karinne.net/amnesia/images/content-bg.jpg) repeat-y right top;
    }
    #col2 {
     margin: 0;
     padding: 0 15px 0 0;
     height: 100%;
    }
    #c3 {
     vertical-align: top;
     border-bottom: 3px solid #fff;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
     min-height: 100%;
     height: auto;
     width: 27%;
     padding: 3px;
     background-color: #fff;
     text-align: center;
    }
    #col3 {
     border-top: 25px solid #dadada;
    }
    #c4 {
     vertical-align: top;
     border-bottom: 1px solid #fff;
     border-left: 3px solid #fff;
     border-right: 3px solid #fff;
     min-height: 100%;
     height: auto;
     width: 70%;
     padding: 3px;
     background-color: #fff;
    }
    #col4 {
     border-top: 25px solid #dadada;
    }
    /* --- menu
    ----------------------------- */
    #menu {
     width: 90%;
     padding: 5px 0 5px 0;
     margin-bottom: 1px;
     background-color: #f7941d;
     color: #000;
    }
    #menu ul {
     list-style: none;
     margin: 0;
     padding: 0;
     border: none;
    }
      
    #menu li {
     margin: 0;
    }
    #menu li a {
     display: block;
     padding: 5px 5px 5px 3px;
     background-color: #f7941d;
     color: #000;
     text-decoration: none;
     width: 90%;
    }
    html>body #menu li a {
     width: auto;
    }
    #menu li a:hover {
     background-color: #f9e3bd;
     color: #000;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="centerit"> 
      <table>
    	<tr> 
    	  <td id="c1"> 
    		<!-- MENU -->
    		<div id="col1"> 
    		  <div id="menu"> 
    			<ul>
    			  <li><a href="#">Home</a></li>
    			  <li><a href="#">Hidden Cameras</a></li>
    			  <li><a href="#">CCTV Cameras</a></li>
    			  <li><a href="#">Employee Theft</a></li>
    			  <li><a href="#">Helpful Hints</a></li>
    			  <li><a href="#">F.A.Q</a></li>
    			  <li><a href="#">About Us</a></li>
    			  <li><a href="#">Contact Us</a></li>
    			</ul>
    		  </div>
    		</div>
    		<!-- END of menu -->
    	  </td>
    	  <td style="width: 5px;"></td>
    	  <td id="c2"> 
    		<!-- CONTENT -->
    		<div id="col2"> 
    		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at 
    			risus. Integer pede quam, rutrum ut, dictum eu, dictum eu, sem. Mauris 
    			ornare rhoncus urna. Suspendisse porttitor turpis auctor felis. Suspendisse 
    			ut lectus. Aenean gravida lorem ornare orci. Proin nulla ligula, cursus 
    			ac, auctor vitae, ultrices eget, est. Aenean non dui sit amet sapien 
    			convallis fringilla. Nunc lacinia. Class aptent taciti sociosqu ad 
    			litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque 
    			id felis eu erat nonummy porttitor. Fusce ornare lacus in urna. Sed 
    			nulla lorem, tristique nec, interdum consequat, vestibulum vitae, 
    			risus. Donec mauris wisi, varius ut, accumsan nec, molestie non, purus. 
    			Donec nec lorem. Proin faucibus mollis nulla.</p>
    		</div>
    		<!-- END of content -->
    	  </td>
    	</tr>
    	<tr> 
    	  <td id="c3"> <div id="col3">
    		  <p>amnesia &copy; | RushOfBlood<br />
    			Dan Taylor 2004</p>
    		</div></td>
    	  <td style="width: 5px;"></td>
    	  <td id="c4"> <div id="col4"></div></td>
    	</tr>
      </table>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright... thanks a bunch Paul. i ditched the white 3px border instead.

    again... thank you!


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
  •