Results 1 to 5 of 5

Thread: Cant extend box to fit text

  1. #1
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Cant extend box to fit text

    If you could look at site www.metaphysicalmt.com you wil see that the main text area is in a grey box. Depending on the browser the box does not extend to fit the text...the text will run into the white at the bottom of the box. I dont see anything on the CSS sheet that would enable me to have the box fit the legnth of text...any ideas to enable the box to grow with the text???

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You have specified a height (775px) for the box inline on the element itself. If you were to remove that and retain the width property (450px), depending upon the rest of the layout and styles, that could allow it to grow and shrink in height with its content. Once you remove the height property, you may also want to remove some or all of the empty paragraphs that currently appear to pad that element's content at its bottom.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for replying John!
    I looked on the style.css sheet and cannot seem tofind what you were referring to...I have pasted below. Can you please help?

    body {
    background:#FFFFFF url("images/simplicss5/images/egyptbackcopy.jpg") no-repeat;
    margin: 0;
    padding: 0;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    }

    #wrapper {
    width: 490px;
    display: table;
    background: transparent url("images/simplicss5/images/ccc.gif") repeat;
    border: 1px #666 solid;
    margin: 15px 82px;
    }

    #header {
    border-bottom: 1px #663333 solid;
    padding-bottom: 6px;
    }
    h1 {
    font: 36px "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
    margin:0 20px;
    text-align:right
    }
    .h1_brown {
    color:#663333;
    }

    #tagline {
    color:#663333;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    font-weight: bolder;
    margin:-8px 22px 0 0;
    text-align:right;
    }

    #content {
    width: 450px;
    margin: 20px auto;
    }
    #content h2 {
    color:#000000;
    font: 16px "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
    font-weight: bolder;
    }
    #content p {
    text-align: justify;
    }
    #content blockquote {
    border-left: 4px #663333 solid;
    padding-left:4px;
    text-align:justify;
    font-style: italic;
    }
    #footer {
    width: 490px;
    margin: 2px 82px;
    color:#663333;
    text-align: center;
    }
    #footer a {
    color:#663333;
    text-decoration: none;
    }


    #sidebar {
    width: 200px;
    position: absolute;
    top: 15px;
    left: 600px;
    }

    .sidebar_item {
    background: transparent url("images/simplicss5/images/ccc.gif") repeat;
    border: 1px #666 solid;
    padding: 2px 6px;
    margin-bottom: 10px;
    }

    #sidebar h3 {
    color:#663333;
    margin: 0;
    border-bottom: 1px #666 solid;
    font: 18px "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
    }
    #sidebar ul {
    margin: 6px 0;
    list-style-type: none;
    padding:0
    }
    #sidebar ul li{
    border-bottom: 1px #666 solid;

    color:#333333;
    }
    #sidebar ul li a{
    text-decoration: none;
    color:#333333;
    display:block;
    padding: 2px
    }
    #sidebar ul li a:hover{
    background-color:#663333;
    color:#ffffff;
    }

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I didn't say that it was in the stylesheet. It is in the HTML tag, an inline style and - it appears that you have edited the page in the meantime so that this height is now 908px, remove it (the red part). It's the div with the id 'content':

    Code:
    <div id="content" style="width: 450px; height: 908px">
    Don't forget to remove some or all of this empty junk (red):

    Code:
    					<td>
    					<p align="center" style="text-align: center"><a href="mailinglist.html"><img border="0" src="MailingListButtoncopy.jpg" width="140" height="60"></a></td>
    					<td>
    
    					<p align="center" style="text-align: center"><a href="newagewebsites.html"><img border="0" src="webdesign.jpg" width="160" height="60"></a></td>
    				</tr>
    			</table>
    			<p align="center">&nbsp;</p>
    			<p align="center">&nbsp;</p>
    			<p align="center">&nbsp;</p>
    			<p style="text-align: left">&nbsp;</p>
    			<h2></h2>
    			<p></p>
    
    			<p></p>
    			<p></p>
    			<p></p>
    			<blockquote></blockquote>
    			<p style="text-align: center"></p>
    			<p></p>
    			<p></p>
    			<p></p>
    			<p style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- BEGIN SiteChatter.com live help code -->&nbsp; 
    		
    	</div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John......
    Thank you
    Thank you
    Thank you
    Thank you
    Thank you!!!!!!!!!!!!!!!!!!!!!!

    You just solved a problem that has been perplexing me for months...I cant express my immense gratitude enough

    Kellee

Bookmarks

Posting Permissions

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