Log in

View Full Version : Cant extend box to fit text



metaphysicalmt
01-11-2007, 04:53 PM
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???

jscheuer1
01-12-2007, 11:33 AM
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.

metaphysicalmt
01-16-2007, 06:00 PM
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;
}

jscheuer1
01-16-2007, 07:36 PM
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':


<div id="content" style="width: 450px; height: 908px">

Don't forget to remove some or all of this empty junk (red):


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

metaphysicalmt
01-19-2007, 04:57 PM
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:D

Kellee