CSS Forum

**jim.thornton** · 10-26-2008, 12:54 AM

I can not figure this out and would appreciate a fresh set of eyes here. I'm creating a site for someone and for some reason the paragrah box will not go the total width of the allowable space.

I've got the width set to 95% and for some reason it is only going about half way and then wrapping.

http://lovesongs.mysamplesite.info/song-lyrics

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
      <title>Song Lyrics</title>
  <base href="http://lovesongs.mysamplesite.info/song-lyrics" />
  <meta name="robots" content="index, follow" />
  <meta name="title" content="Song Lyrics" />
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>

    <link rel="stylesheet" href="/templates/pesonalizedlovesongs/css/template.css" type="text/css" />

<!--[if IE]>
  <link rel="stylesheet" href="/css/ieonly.css" type="text/css" />
<![endif]-->
    
<script type="text/javascript" src="/plugins/system/rokbox/rokbox.js"></script>
<link href="/plugins/system/rokbox/themes/dark/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	if (typeof(RokBox) !== 'undefined') {
		window.addEvent('domready', function() {
			var rokbox = new RokBox({
				'className': 'rokbox',
				'theme': 'dark',
				'transition': Fx.Transitions.Quad.easeOut,
				'duration': 200,
				'chase': 40,
				'frame-border': 20,
				'content-padding': 0,
				'arrows-height': 35,
				'effect': 'quicksilver',
				'captions': 1,
				'captionsDelay': 800,
				'scrolling': 0,
				'keyEvents': 0,
				'overlay': {
					'background': '#000000',
					'opacity': 0.85,
					'duration': 200,
					'transition': Fx.Transitions.Quad.easeInOut
				},
				'defaultSize': {
					'width': 680,
					'height': 500
				},
				'autoplay': '1',
				'controller': 'true',
				'bgcolor': '#f3f3f3',
				'youtubeAutoplay': 0,
				'vimeoColor': '00adef',
				'vimeoPortrait': 0,
				'vimeoTitle': 0,
				'vimeoFullScreen': 1,
				'vimeoByline': 0
			});
		});
	};
</script>
</head>

<body>
   <div id="container">
   		<h1 class="sitetitle"><span>Personalized Love Songs</span></h1>

		<h3 class="slogan"><span>Gifts for valentines, weddings, anniversaries, birthdays or I love you</span></h3>
   		<div id="container-top"></div> <!-- #ocntianer .top -->
		
		<div id="container-body">
			 <div id="header">
									<ul id="mainlevel-mainmenu"> <li class="first" > <a href="/home">Home</a> </li><li  > <a href="/song-lyrics">Song Lyrics</a> </li><li  > <a href="#">Testimonials</a> </li><li  > <a href="#">Sample Music</a> </li><li  > <a href="#">Order Now</a> </li><li  class="last"> <a href="#">Contact Us</a> </li> </ul>

							 </div>  <!-- #header -->
			 
			 <div id="mainbody">
			 	  <div id="content">
					
<table class="contentpaneopen">



<tr>
<td valign="top">
<h1><span>Songs</span> for Him</h1>

<p>Here is a block of text that is testing to see if the <br />
text box wraps or goes the width of the content area.</p>
<br type="_moz" />

</td>
</tr>

</table>
<span class="article_separator">&nbsp;</span>

				  </div>  <!-- #content -->
				  
				  <div id="right">

															<div class="moduletable">
					<a href="/index2.php?option=com_content&view=article&id=4" class="available-names" rel="rokbox">  </a>		</div>
	
										  </div>  <!-- #right -->
				  
				  <div class="clrboth"> </div> <!-- .clrboth -->
			 </div>  <!-- #mainbody -->
		</div>  <!-- #container-body -->

		
		<div id="container-bottom"></div> <!-- #container .bottom -->
   </div>  <!-- #container -->

   
   
</body>
</html>

CSS:

Code:

/* CSS Document */
/****************************************************************************
Colors:
   #7c0f0f - red background & heading highlights
   #5c5948 - heading color (grey)
/****************************************************************************/

* {
   padding: 0;
   margin: 0;
}

.pngfix { behavior: iepngfix.htc; }

h1, .componentheading, .contentheading { font-size: 1.3em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
h4, h5, h6 { font-size: 1em; }

h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, .componentheading, .contentheading {
   margin-bottom: .8em;
   color: #5c5948;
}

p {
   font-family: Calibri, Century Gothic, verdana, sans-serif;
}
/****************************************************************************/
/********   TYPOGRAPHY   ****************************************************/
/****************************************************************************/
body {
   font-size: 76%;
   color: #5c5948;
}

h1, h2, h3, h4, h5, h6, .contentheading, #header a, .componentheading {
   font-family: Centaur, Garamond, Georgia, Serif;
   text-transform: uppercase;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, .componentheading span, .contentheading span {
   color: #7c0f0f;
}

h1.sitetitle { 
   width: 100%;
   height: 72px;
   background: transparent url(../images/h1-personalized-love-songs.png) no-repeat center center;
   margin: 0;
}

h1.sitetitle span { display: none; }

h3.slogan {
   width: 100%;
   height: 56px;
   background: transparent url(../images/h3-slogan.png) no-repeat center center;
   margin: -.8em 0 0 0;
}

h3.slogan span{
   display: none;
}

/****************************************************************************/
/*********  background for page  ********************************************/
/****************************************************************************/

body {
   background: #000 url(../images/bg-body.jpg) repeat-y center top;
} 

#container {
   margin: 20px auto;
   width: 760px;
}

#container-top {
   width: 100%;
   height: 52px;
   background: transparent url(../images/box-top.png) no-repeat center top;
}
 
#container-body {
   width: 100%;
   background: transparent url(../images/box-sides.png) repeat-y center top;
}

#container-bottom {
   width: 100%;
   height: 52px;
   background: transparent url(../images/box-bottom.png) no-repeat center top;
}

/****************************************************************************/
/*************  layout   ****************************************************/
/****************************************************************************/
#header {
   width: 652px;
   height: 206px;
   margin: 0 auto;
   background: #7c0f0f url(../images/bg-rose.jpg) no-repeat left center;
}

#header ul#mainlevel-mainmenu {
   width: 170px;
   height: 206px;
   margin: 0;
   padding: 0;
   float: right;
   list-style: none inside none;
   background: url(../images/bg-menu.gif) no-repeat right center;
}

#header ul#mainlevel-mainmenu li {
   width: 84%;
   border-bottom: 1px dotted #fff;
}

#header ul#mainlevel-mainmenu li.first {
   padding-top: 5px;
}

#header ul#mainlevel-mainmenu li.last {
   border: none;
}

#header ul#mainlevel-mainmenu li a:link, #header ul#mainlevel-mainmenu li a:visited,
#header ul#mainlevel-mainmenu li a:hover, #header ul#mainlevel-mainmenu li a:active {
   display: block;
   width: 100%;
   padding: .5em 8%;
   text-transform: uppercase;
   font-size: 1.2em;
}

#header ul#mainlevel-mainmenu li a:link, #header ul#mainlevel-mainmenu li a:visited,
#header ul#mainlevel-mainmenu li a:hover, #header ul#mainlevel-mainmenu li a:active {
   color: #fff;
   text-decoration: none;
}

#mainbody {
   position: relative;
   width: 652px;
   margin: 1em auto 0em auto;
}

#content {
   float: left;
   width: 482px;
background: orange;
}

#content p {
   display: block;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
background: green;
}

#content a {
   text-decoration: none;
}

#content a:hover {
   text-decoration: underline;
}

#right {
   position: relative;
   width: 170px;
   height: 500px;
   overflow: hidden;
   float: right;
   background: transparent url(../images/bg-right.gif) no-repeat right top;
}

#right a.available-names {
   display: block;
   position: absolute;
   top: 40px;
   width: 100%;
   height: 75px;
}

#right a.ordernow {
   display: block;
   position: absolute;
   bottom: 0;
   width: 170px;
   height: 33px;
}
/****************************************************************************/
/*************  classes   ***************************************************/
/****************************************************************************/
.clrboth {
   clear: both;
   width: 100%;
   height: 0px;
}

.divider {
   width: 90%;
   height: 0;
   margin: .8em auto;
   padding-top: 0.8em;
   border: 0;
   border-bottom: 1px solid #cccccc;
}

.red { color: #7c0f0f; }

.hidetext { display: none; }

**LadynRed** · 10-26-2008, 11:00 AM

It's not the paragraph, it's your TABLE that the paragraph is sitting in. Why use a table at all ???

Set the table to 100% and it will take up the entire area - text inside it included.

**jim.thornton** · 10-26-2008, 01:19 PM

I'm using the table because it is automatically inserted by Joomla. With the new Joomla version, I have to sit down and create a chrome for it that will finally get rid of the tables... I just have to find the time

Thanks... I'll check out the table.

**LadynRed** · 10-26-2008, 05:41 PM

Ok.. Joomla and tables I get. You should be able to style it to 100% width even in Joomla.

**jim.thornton** · 10-26-2008, 08:36 PM

I did that.... I was using the highlight & view selection source in FF and the table wasn't coming up.

I can't believe I didn't think to look there.

Thanks again... Can you believe I was working on "finding" that problem for 2 hrs before I posted the message!

**LadynRed** · 10-27-2008, 09:31 AM

I believe it

You might want to try out Firebug, a Firefox extension, that's how I was able to spot it so quickly.