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.


 Subscribe in a reader

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.
Hi Unregistered, why not enter WOTM this month and show off your skills? Not only will you win the admiration of your colleagues, but also one years supermember status and your site featured on the home page. Go on enter NOW !




Reply
 
LinkBack Thread Tools
  #1  
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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Sep 17th, 2007, 13:42
Elite Veteran
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!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
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 18:01.

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

Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Online Casino :: Web Hosting :: Football Betting :: Web Development India :: Football Stats :: Free Bets :: Extreme Clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Search Engine Optimisation :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization 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