468,306 Members | 1,200 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,306 developers. It's quick & easy.

Left column not growing with right

11
This is a bit confusing until you actually see what I'm talking about but the main content of my page is not growing with the right column. I want the main content (left/larger column) to take into account the right deck (right column) so that both end at the same place.

************************************************** *********

Here's the URL...

http://www.siteiq.net/TEST/index-new.html


************************************************** **********

Here's the CSS...
Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.     color: #000000;
  6.     font: 76%/1.5em "Arial", Helvetica, sans-serif;
  7.     margin: 0;
  8.     padding: 0;
  9.     background-color: #ece0d2;
  10. }
  11.  
  12. #wrapper {
  13.     color: #000000;
  14.     margin: 0px 100px 0px 100px;
  15.     background-color: #FFFFFF;
  16. }
  17.  
  18. #header {
  19.  
  20. }
  21.  
  22. #header-top {
  23.     border: 1px solid #999991; 
  24. }
  25.  
  26. #login {
  27.     height: 20px;
  28.     width: auto;
  29.     background-color: #b2b2aa;
  30.     background-image: none;
  31. }
  32.  
  33. img#login {
  34.      float: right;
  35. }
  36.  
  37. #header-bottom {
  38.     background-color: #999991;
  39.     width: 100%;
  40.     height: 267px;
  41. }
  42.  
  43. img#conferance {
  44.     float: left;
  45.     padding-right: 20px;
  46. }
  47.  
  48. #feature {
  49.     color: #FFFFFF;
  50.     font-weight: bold;
  51.     font-size: medium;
  52.     padding-top: 60px;
  53. }
  54.  
  55. img#quote {
  56.     padding-top: 30px;
  57. }
  58.  
  59. #footer {
  60.     margin-left: 245px;
  61.     text-align: center;
  62.     font-size: x-small;
  63. }
  64.  
  65. #header hr, #footer hr {
  66.     display: none;
  67. }
  68.  
  69. #deck {
  70.     border-left-width: 1px;
  71.     border-left-style: solid;
  72.     border-left-color: #999991;
  73.     position: absolute;
  74.     right: 0;
  75.     top: 0;
  76.     width: 225px;
  77.     padding: 10px;
  78.     background-color: #FFFFFF;
  79. }
  80. #hmhd {
  81.     font-weight: bold;
  82.     color: #4F4F4F;
  83.     border-top-width: 1px;
  84.     border-right-width: 1px;
  85.     border-bottom-width: 1px;
  86.     border-left-width: 1px;
  87.     border-top-style: solid;
  88.     border-right-style: none;
  89.     border-bottom-style: solid;
  90.     border-left-style: none;
  91.     border-top-color: #4F4F4F;
  92.     border-right-color: #4F4F4F;
  93.     border-bottom-color: #4F4F4F;
  94.     border-left-color: #4F4F4F;
  95.     font-size: medium;
  96. }
  97.  
  98. .hmhdlink {
  99.     color: #4F4F4F;
  100.     text-decoration: none;
  101. }
  102.  
  103. #container {
  104.     position: relative;
  105.     margin-top: 15px;
  106.     background-color: #FFFFFF;
  107. }
  108.  
  109. #content {
  110.     margin-top: 0;
  111.     margin-right: 245px;
  112.     margin-bottom: 0;
  113.     margin-left: 0px;
  114.     padding: 10px;
  115.     background-color: #FFFFFF;
  116. }
  117.  
  118. h1 {
  119.     font-size: medium;
  120.     font-weight: bold;
  121.     color: #000000;
  122. }
  123.  
  124. h2 {
  125.     font-size: small;
  126.     font-weight: bold;
  127. }
  128.  
  129. h3 {
  130.     font-size: small;
  131.     font-weight: bold;
  132. }    
  133.  
  134. .link {
  135. font-family: "Arial";
  136. font-size: small;
  137. font-height: small;
  138. color: #AA292B;
  139. text-decoration : none;
  140. font-weight : bold;
  141. }
  142.  
  143. li {
  144.     color: #AA292B;
  145.     list-style-type: square;
  146.     list-style-image: url(img/bullet_diam.jpg);
  147. }
  148.  
  149. .abtftlink {
  150.     font-family: Arial;
  151.     font-size: x-small;
  152.     color: #AA292B;
  153.     text-decoration : none;
  154.     font-weight : bold;
  155. }
  156.  
************************************************** ****************

Here's the HTML...
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC     "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.                         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
  4.  
  5. <head>
  6.   <title>Test</title>
  7.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.   <link rel='stylesheet' type='text/css' href='styles-new.css' />
  9. </head>
  10.  
  11. <body>
  12. <div id="wrapper">
  13. <div id="header">
  14.     <img src="img/logo_siq.gif" alt="siteIQ.net" width="152" height="28" />
  15.     <hr />
  16.      <div id="header-top">
  17.         <img src="img/l1_who.gif" alt="who we are" />
  18.         <img src="img/l1_what.gif" alt="what is siteIQ" />
  19.         <img src="img/l1_why.gif" alt="why siteIQ" />
  20.         <img src="img/l1_intrack.gif" alt="inside track" />
  21.         <img src="img/l1_report.gif" alt="siteIQ reports" />
  22.         <img src="img/l1_shop.gif" alt="shop" />
  23.         <img src="img/l1_cu.gif" alt="how to contact us" id="contact" />
  24.   </div><!-- header-top -->
  25.    <div id="login">
  26.         <img src="img/l3_clogin.gif" alt="client login" name="login" width="68" height="20" id="login"/>        
  27.   </div><!-- login -->
  28.   <div id="header-bottom">
  29.     <img src="img/photo_index.jpg" alt="conferance call" id="conferance" width="330" height="267" />
  30.     <div id="feature">In today’s highly competitive technology industry, providing a world-class online experience is essential to creating, retaining, and supporting customers 
  31.       <br>
  32.       <img src="img/qte_ourclients.gif" alt="Quote. Our clients rely on the siteIQ programs to help them achieve these objectives... End quote." id="quote" />
  33.     </div><!-- feature -->
  34.   </div><!-- header-bottom -->
  35. </div><!-- header -->
  36. <div id="container">
  37. <div id="content">
  38. <div id="deck">
  39.     <div id="hmhd"><a class="hmhdlink" href="INTRACK/intrack_arch.html">Recent Research</a></div>      
  40. <ul>
  41. <li><a class="link" href="INTRACK/it_3.12.html">Context and Consistency: The Two C&rsquo;s You Can&rsquo;t Ignore</a></li>
  42. <li><a class="link" href="INTRACK/it_3.11.html">Earth to Enterprise:  There&rsquo;s a new (deputy) sheriff in town</a></li>
  43. <li><a class="link" href="INTRACK/it_3.10.html">Web 2.0: Where   Oracle.com Leads</a> </li>
  44. <li><a class="link" href="INTRACK/it_3.9.html">The New CA.com: First Takes</a></li>
  45. <li><a class="link" href="INTRACK/it_3.8.html">SDN: Time to Celebrate </a> </li>
  46. <li><a class="link" href="INTRACK/it_3.7.html">Community and Industry Marketing: A Tale of Two Zones</a></li>
  47. <li><a class="link" href="INTRACK/it_3.6.html">You Know What They Say About Spoiling the Broth...</a></li>
  48. <li><a class="link" href="INTRACK/it_3.5.html">Trends and Analysis: Network Systems Industry Web 2.0— More Than Meets the Eye</a></li>
  49. <li><a class="link" href="INTRACK/it_3.4.html">Why Web 2.0 is like Botox</a></li>
  50. </ul>
  51. <p><a class="link" href="INTRACK/intrack_arch.html">more research...</a></p>
  52. </div><!-- deck -->
  53.     <h1>Current Focus: Solutions Marketing, Community &amp; Industry  Marketing</h1>
  54.  
  55. <p>Once upon a time, product &amp; services  marketing was simple on the Web. Vendors created simple marketing messages for  each offering, and rarely linked these offerings to others. Since 2000, however,  IT vendors have been tinkering with how to cross-market their products &amp; services on a grander scale in the hopes of better capitalizing on their large  product &amp; service collections, differentiating themselves from their  competitors, and getting a larger piece of the customer spending pie. Enter  Solutions Marketing, and its kissing cousin, Community &amp; Industry  Marketing.</p>
  56.  
  57. <p>Over the past quarter, siteIQ analysts have  reviewed 20+ IT Websites in 5 industries to deconstruct Solutions, and Community  &amp; Industry Marketing&mdash;from its core objectives to basic content delivery  approaches. Our research has found that, indeed, there is a way to demystify  the complex task of crafting solutions-based marketing messages that deliver what visitors need and expect&mdash;solutions. What&rsquo;s more, the steps necessary to developing effective solutions marketing messages are even simpler than you  think.</p>
  58.  
  59. <h2>Next Up: Online Support</h2>
  60.  
  61. <p>What is the key to developing an effective, usable  online support zone? A draconian architecture? Search functions that have all  the bells &amp; whistles? Holistic programs that address every conceivable  customer need? Don&rsquo;t miss our upcoming siteTrends that looks at the basic requirements for effective online support&mdash;and of course points out the best  and worst behaviors on the IT Web today.</p>
  62. <div id="footer">
  63.     <hr />
  64.     © 2001-2007 G Three Research, Corp.,<br />
  65.     <a class="abtftlink" href="legal.html" target="_blank">
  66. Legal<img src="img/arrow.gif" alt="arrow" border="0" height="15" width="16">
  67. </a>
  68. <a class="abtftlink" href="privacy.html" target="_blank">
  69. Privacy<img src="img/arrow.gif" alt="arrow" border="0" height="15" width="16">
  70. </a>
  71. <a class="abtftlink" href="mailto:webmaster@thebestpractice.com">
  72. Webmaster (@)
  73. </a>
  74. </div><!-- footer -->
  75. </div><!-- content -->
  76. </div><!-- container -->
  77. </div><!-- wrapper -->
  78. </body>
  79. </html>
  80.  
  81. </body>
  82.  
</html>
Dec 12 '07 #1
5 2350
drhowarddrfine
7,435 Expert 4TB
Fix your html and css errors first.
Dec 12 '07 #2
Timeri
11
Fix your html and css errors first.
Ok, I think I have them fixed now but I'm new to css and it's entirely possible there is still a mistake (or two) there...I just don't know what it is. I ran a validator on the html & it came out clean. Hopefully it's clean now. Sorry...

Although, I still need help with my original question :)

Thanks again!!!!
Dec 12 '07 #3
drhowarddrfine
7,435 Expert 4TB
You still have one html error and one css error.

1) You are not allowed to have more than one id name per page. An id name is unique to one and only one element. You use 'login' twice.

2) You are using 'font-height' in your css, but there is no such thing. Possibly you mean 'line-height'? Or font-size?

Your original problem won't be related to these but they need fixing.
Dec 12 '07 #4
Timeri
11
Again, thanks for the help...I think I've fixed everything now. Please let me know if you see anything else. Your help is GREATLY appreciated!
Dec 14 '07 #5
Timeri
11
You still have one html error and one css error.

1) You are not allowed to have more than one id name per page. An id name is unique to one and only one element. You use 'login' twice.

2) You are using 'font-height' in your css, but there is no such thing. Possibly you mean 'line-height'? Or font-size?

Your original problem won't be related to these but they need fixing.

Thanks for the pointers! I've fixed these errors. Hopefully I'm ready now to tackle my original issue. Are you still available to help? Thanks so much!
Dec 18 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by DMAC | last post: by
27 posts views Thread by Aurangzeb M. Agha | last post: by
4 posts views Thread by Dan V. | last post: by
4 posts views Thread by rfox | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.