Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    automatic height

    I have a column on the right side of my content that I want to stretch to the height of my content. The column will rarely ever have more content then the actual content div itself. Anyway the div I need to stretch is called #rightcol. Here you can see what I mean: http://ronnieswietek.com/hosted/ostari/

    The column on the right is set to 300px right now to demonstrate, but I need it to stretch to the bottom. Here is my code:
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /*
    * Layout and global styles
    */
    body {
    	margin: 0px;
    	padding: 0px;
    	background-color: #e2e8cc;
    	font-family: "Verdana", Arial, Helvetica, sans-serif;
    }
    #header {
    	margin: auto;
    	height: 174px;
    	background:url("images/headerbg.jpg") repeat-x;
    }
    #logo {
    	height: 129px;
    }
    #nav {
    	margin: auto;
    	width: 885px;
    	height: 45px;
    	background:url("images/navbg.jpg") repeat-x;
    }
    #wrapper {
    	margin: auto;
    	width: 885px;
    }
    #contentHolder {
    	width: 595px;
    	float:left;
    }
    #rightcol {
    	width: 290px;
    	height:300px;
    	float:right;
    	background: url("images/rightcolbg.jpg") repeat-y #c8cfac;
    }
    /*
    * Navigation styles
    */
    .nav {
    	margin: auto;
    	list-style: none;
    }
    .nav li {
    	font-size: 12px;
    	margin-top: 15px;
    	padding-left: 30px;
    	color: #fff;
    	float: left;
    	display: inline;
    }
    /*
    * Content layout (left column)
    */
    #content {
    	padding-top: 20px;
    	padding-right: 10px;
    	/*padding: 12px;*/
    }
    /*
    * Content styles (left column)
    */
    .pageTitle {
    	color: #514016;
    	margin-top: 15px;
    	padding-bottom: 5px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size: 32px;
    }
    .ptext {
    	font-size: 13px;
    	line-height: 1.6em;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="header">
      <div id="logo"></div>
      <div id="nav">
        <ul class="nav">
          <li>HOME</li>
          <li>SOLUTIONS</li>
          <li>SUPPORT</li>
          <li>ABOUT OSTARI</li>
          <li>CONTACT</li>
        </ul>
      </div>
    </div>
    <div id="wrapper">
      <div id="contentHolder">
        <div id="content"> <img src="images/homeimg.jpg" title="im a home image" />
          <span class="pageTitle">Welcome to Ostari</span>
          <p class="ptext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus feugiat congue diam. Nullam imperdiet lorem nec magna. Aliquam varius venenatis augue.
            Donec ut odio ut eros tincidunt tincidunt. Vivamus tincidunt urna vel sem. Proin accumsan pede et diam. Ut id ipsum sed augue ultricies interdum. Sed et 
            libero. Aliquam dignissim viverra magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique, nunc 
            eu consectetuer mattis, lectus tellus pharetra neque, in suscipit ipsum nunc non arcu. Nam id diam. Maecenas scelerisque. Integer tincidunt. Donec dictum,
            quam quis congue tempor, turpis purus sodales enim, sit amet malesuada ipsum neque id sapien. Sed suscipit. Class aptent taciti sociosqu ad litora torquent
            per conubia nostra, per inceptos himenaeos. Suspendisse pede.</p>
          <p class="ptext">Ut tristique. Donec laoreet lacinia orci. Quisque sed lectus. Curabitur est sapien, cursus quis, tempus id, molestie imperdiet, massa. Vivamus ultricies.
            Phasellus at tortor sit amet massa sollicitudin scelerisque. Proin vehicula, orci eget ornare fringilla, sem sem placerat est, nec auctor magna felis non augue.
            Aliquam id justo. Curabitur vel lectus et libero sollicitudin congue. Sed a dui. Donec sit amet sem vitae est auctor fermentum. Ut congue vestibulum neque. 
            Curabitur malesuada turpis. Nam fermentum convallis felis. Etiam lacus. Suspendisse eget pede. Cras diam lectus, faucibus sed, posuere at, aliquam ut, diam.</p>
        </div>
      </div>
      <div id="rightcol"></div>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    I don't know much but just take out the width setting.

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nevermind figured it out

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /*
    * Layout and global styles
    */
    body {
    	margin: 0px;
    	padding: 0px;
    	background-color: #e2e8cc;
    	font-family: "Verdana", Arial, Helvetica, sans-serif;
    }
    #header {
    	margin: auto;
    	height: 174px;
    	background:url("images/headerbg.jpg") repeat-x;
    }
    #logo {
    	height: 129px;
    }
    #nav {
    	margin: auto;
    	width: 885px;
    	height: 45px;
    	background:url("images/navbg.jpg") repeat-x;
    }
    #wrapper {
    	margin: auto;
    	width: 885px;
    }
    #contentHolder {
    	position: relative;
    	width: 595px;
    	padding-right: 290px;
    	float:left;
    	background: #c8cfac url("images/rightcolbg.jpg") repeat-y right top;
    }
    #rightcol {
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	width: 290px;
    }
    /*
    * Navigation styles
    */
    .nav {
    	margin: auto;
    	list-style: none;
    }
    .nav li {
    	font-size: 12px;
    	margin-top: 15px;
    	padding-left: 30px;
    	color: #fff;
    	float: left;
    	display: inline;
    }
    /*
    * Content layout (left column)
    */
    #content {
    	height: 100%;
    	background-color: #e2e8cc;
    	padding-top: 20px;
    	padding-right: 10px;
    	/*padding: 12px;*/
    }
    /*
    * Content styles (left column)
    */
    .pageTitle {
    	color: #514016;
    	margin-top: 15px;
    	padding-bottom: 5px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size: 32px;
    }
    .ptext {
    	font-size: 13px;
    	line-height: 1.6em;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="header">
      <div id="logo"></div>
      <div id="nav">
        <ul class="nav">
          <li>HOME</li>
          <li>SOLUTIONS</li>
          <li>SUPPORT</li>
          <li>ABOUT OSTARI</li>
          <li>CONTACT</li>
        </ul>
      </div>
    </div>
    <div id="wrapper">
      <div id="contentHolder">
        <div id="rightcol">
        	<p>blah blah blah</p>
        	<p>blah blah blah</p>
        	<p>blah blah blah</p>
        </div>
        <div id="content"> <img src="images/homeimg.jpg" title="im a home image" />
          <span class="pageTitle">Welcome to Ostari</span>
          <p class="ptext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus feugiat congue diam. Nullam imperdiet lorem nec magna. Aliquam varius venenatis augue.
            Donec ut odio ut eros tincidunt tincidunt. Vivamus tincidunt urna vel sem. Proin accumsan pede et diam. Ut id ipsum sed augue ultricies interdum. Sed et
            libero. Aliquam dignissim viverra magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique, nunc
            eu consectetuer mattis, lectus tellus pharetra neque, in suscipit ipsum nunc non arcu. Nam id diam. Maecenas scelerisque. Integer tincidunt. Donec dictum,
            quam quis congue tempor, turpis purus sodales enim, sit amet malesuada ipsum neque id sapien. Sed suscipit. Class aptent taciti sociosqu ad litora torquent
            per conubia nostra, per inceptos himenaeos. Suspendisse pede.</p>
          <p class="ptext">Ut tristique. Donec laoreet lacinia orci. Quisque sed lectus. Curabitur est sapien, cursus quis, tempus id, molestie imperdiet, massa. Vivamus ultricies.
            Phasellus at tortor sit amet massa sollicitudin scelerisque. Proin vehicula, orci eget ornare fringilla, sem sem placerat est, nec auctor magna felis non augue.
            Aliquam id justo. Curabitur vel lectus et libero sollicitudin congue. Sed a dui. Donec sit amet sem vitae est auctor fermentum. Ut congue vestibulum neque.
            Curabitur malesuada turpis. Nam fermentum convallis felis. Etiam lacus. Suspendisse eget pede. Cras diam lectus, faucibus sed, posuere at, aliquam ut, diam.</p>&nbsp;
        </div>
      </div>
    </div>
    </body>
    </html>
    Concept:
    Wrap your content inside your rightcol div so that it stretches it out for you.

    How:
    Give the content container a padding-right of however wide your right col should be. Move the rightcol background to the content container. Give the actual content an overlay background to match your page background. Position your rightcol absolutely to the top right of your content container.

    And there you go.

  • #5
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Dang, went to all that trouble for nada... *tear*

  • #6
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    not for nada, I learned something and it wasn't even for me... I've actually changed a couple of ides for layouts because I didn't think of that, Thanks!

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    anytime


  •  

    Posting Permissions

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