CSS ID selector not stretching

This is a discussion on "CSS ID selector not stretching" within the Web Page Design section. This forum, and the thread "CSS ID selector not stretching are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page CSS ID selector not stretching

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Sep 17th, 2007, 13:11
New Member
Join Date: Sep 2007
Location: Pool
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
CSS ID selector not stretching
Hi, Hopefully someone can help, I am using several ID selectors as holders inside my design and then class styles inside, however the ID selector does not seem to stretch when I add content, I am also using a footer on the page and this does not move until I put a height into the ID style, this however is not ideal as the content on my pages is different lengths and makes the shorter pages look horrible, please see below for my exert of code

Thanks in advance

Justin
Code: Select all
#textarea {
 position: relative;
 width: 800px;
 margin: auto;
 left: 0px;
 background-color: #1361ab;
 padding: 0px;
 height: 1000px;
}
Code: Select all
<div id="textarea">
<div class="text">
<div class="textbox1"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="textbox2"><!-- TemplateBeginEditable name="dental web design text area 1" -->
  <table width="511" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="20">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="20">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
<!-- TemplateEndEditable --></div>
<div class="textbox3"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="textboxgap"></div>
<div class="textbox4"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="textbox5"><!-- TemplateBeginEditable name="dental web design text area 2" -->
  <table width="511" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="20">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="20">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
<!-- TemplateEndEditable --></div>
<div class="textbox6"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="textboxgap"></div>
<div class="textbox7"><img src="../public_html/images/bdhf-links.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="3,3,248,146" href="http://www.nationalsmileweek.org/" target="_blank" />
<area shape="rect" coords="264,4,509,152" href="http://www.mouthcancer.org" target="_blank" />
</map></div>
<div class="textboxgap"></div>
</div>
<div class="links">
<div class="linksbox1"></div>
<div class="linksbox2">
  <table width="256" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="15">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="15">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><p class="highlight-text">See what our clients have to say about us...</p>
        <p>To view our testimonials please <a href="../public_html/testimonials_design_web_dental/testimonials_dental_design_company.html" class="class_lnk">click here &gt;&gt;</a> </p></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<div class="linksbox3"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="linksboxgap"></div>
<div class="linksbox4"></div>
<div class="linksbox5">
  <table width="256" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="15">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="15">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><table width="226" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="70"><a href="../public_html/case_studies_dental_web_design/case_studies_dental_design_company.html"><img src="../public_html/images/case-studies/thumbs/7.jpg" alt="Dental Website Design" width="100" height="100" border="0" /></a></td>
          <td width="226">&nbsp;</td>
          <td width="70"><a href="../public_html/case_studies_dental_web_design/case_studies_dental_design_company.html"><img src="../public_html/images/case-studies/thumbs/8.jpg" alt="Dental Website Design" width="100" height="100" border="0" /></a></td>
          </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          </tr>
        
        
      </table>
        <p class="highlight-text">Looking for more than just a website? Create your own brand... </p>
        <p>To view our case studies please <a href="../public_html/case_studies_dental_web_design/case_studies_dental_design_company.html" class="class_lnk">click here &gt;&gt;</a></p></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<div class="linksbox6"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="linksboxgap"></div>
<div class="linksbox7"></div>
<div class="linksbox8">
  <table width="256" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="15">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="15">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100"><img src="../public_html/images/site-of-the-month/dental-website-month.jpg" alt="Dental Website design - Site of the month" width="100" height="100" /></td>
          <td width="11">&nbsp;</td>
          <td width="115" valign="top"><p class="highlight-text">Site of the month - our   latest addition to the www...</p>
            <p><a href="http://www.crystalcleardentalspa.co.uk/" target="_blank" class="class_lnk">Click here to visit the website &gt;&gt;</a> </p></td>
        </tr>
      </table>      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<div class="linksbox9"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
<div class="linksboxgap"></div>
<div class="linksbox10"></div>
<div class="linksbox11"><!-- TemplateBeginEditable name="dental web design glossary" -->
  <table width="256" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="15">&nbsp;</td>
      <td>&nbsp;</td>
      <td width="15">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
<!-- TemplateEndEditable --><table width="256" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="15">&nbsp;</td>
    <td><a href="../public_html/glossary_dental_design_web/glossary_web_design_dental.html" class="class_lnk">read on ... </a></td>
    <td width="15">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<div class="linksbox12"><img src="../public_html/images/spacer.gif" alt="Dental Web Design" width="5" height="5" /></div>
</div>
 
</div>
<div id="footer">
  <div class="copyright">Copyright &copy; 2007 Dental Design Products Limited </div>
  <div class="logo"></div>
Last edited by karinne; Sep 17th, 2007 at 13:35. Reason: Please use the vBcode [ code ] when inserting code in your post.
Reply With Quote

  #2 (permalink)  
Old Sep 17th, 2007, 13:42
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS ID selector not stretching
try adding overflow:hidden; to your css.

Code: Select all
#textarea {
 position: relative;
 width: 800px;
 margin: auto;
 left: 0px;
 background-color: #1361ab;
 padding: 0px;
 height: 1000px;
 overflow: hidden;
}
If that doesn't do it, let me know!
Reply With Quote
  #3 (permalink)  
Old Sep 17th, 2007, 14:09
New Member
Join Date: Sep 2007
Location: Pool
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS ID selector not stretching
sadly that has cut the bottom of the page off if I make the the size of the area smaller, all I suppose I want to do is remove the height and have it sit 100% the height of the contents inside, I have just test it with no content in it and it will stretch when typing pur putting a table directly in it, it just seems as soon as I use class inside the ID selector to lay stuff out it won't auto stretch,

thanks for the reply and hopefully in advance for this one.

Justin
Reply With Quote
Reply

« Trouble closing gaps | Layout messed up in IE7.Please help! »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
div not stretching rabidmuskrat Web Page Design 2 Jul 6th, 2007 03:25
Content Selector maxz JavaScript Forum 2 Jun 15th, 2007 15:49
Stretching Tables alio Web Page Design 3 Jan 1st, 2007 00:59
Stretching Backgrounds ed@thehaunting.net Flash & Multimedia Forum 1 Apr 7th, 2004 13:54


All times are GMT. The time now is 03:05.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Midwife Forums :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43