473,416 Members | 1,736 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > left column not growing with right

Join Bytes to post your question to a community of 473,416 software developers and data experts.

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 2699
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

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

Similar topics

9
[Q] Two Column Layout - right column relative to left
by: Eric | last post by:
I would like to setup a two column layout for my web page using CSS. I would like the Left column width to be auto. Can I have the right column be offset by 8 pixels from the right edge of the...
HTML / CSS
9
Computed Column calculations
by: DMAC | last post by:
If i want to split a computed column into two or more columns based on the the length (its a varchar) of the computed column, how often will sql server determine what the computed column is?...
Microsoft SQL Server
7
Creating left and right absolute columns and two center fluid colums in CSS
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my...
HTML / CSS
27
no space left on device
by: Aurangzeb M. Agha | last post by:
I'm running Postgres 7.1.3, and just started having a problem where my dynamic site is going down (read-only DB, with no writes happening to the DB) regularly (every other day). I have no idea...
PostgreSQL Database
4
Why is right column not aligned with left?
by: Dan V. | last post by:
Does anyone have any idea why the right column is not aligned with the left column? It is much lower from the top. Please comment: http://officeactivate.com/newest/test.shtml Is it because...
HTML / CSS
0
HELP: Float Left box is drifting to the right in ie!
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600...
HTML / CSS
9
left() and right() function in MS SQL vs MS ACCESS
by: sql guy123 | last post by:
I normally use MS ACCESS vs MS SQL,, which has a left() and right() function. I need to use MS SQL for this project but I am not familiar with it. I have read a few books, but can not figure out...
Microsoft SQL Server
4
100% Height for Left Column
by: rfox | last post by:
I have a two-column layout where I want the left column to have a colored background while the right column (main content div) has a white background. Please see...
HTML / CSS
3
header,footer,left & right column fixed and body information scrolling to use div
by: Noorain | last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all...
HTML / CSS
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA
0
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
C# / C Sharp

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!