No replies
sime
sime's picture
User offline. Last seen 1 year 30 weeks ago. Offline
rank Regular
Regular
Joined: 2007-12-20
Posts: 17
Points: 0

Sorry for the vague subject!

I am building some of those infamous rounded corner content boxes.
Remarkably enough, I build the bulletproof box correctly.
However, when I try to insert some info with a background color, the color does not expand to fill the whole box.

Here is the html

<div id="sidebar_boxes">
 
     <div class="sidebar_box">
          <h3 title="Facts">&nbsp;</h3>
 
               <div class="sidebar_mid">
	            <p class="grey1">Human error accounts for 32% of all data loss</p>
		    <p class="grey2 orange">The US Bureau of Labor reports that 93% of companies that suffer a significant data loss are out of business within 5 years</p>
		    <p class="grey1 orange">A survey of IT executives revealed that 40% of companies were unable to recover their data from tape due to media unreliability</p>
		    <p class="grey2 orange">Complete automation, lower risk and immediate data recovery vs. tape backup</p>
 
          </div><!--.sidebar_mid-->
 
     </div><!--.sidebar_box-->		
 
</div><!--#right_boxes-->

CSS:

#sidebar_boxes {
	vertical-align:top;	
	margin:0;
	padding:0;
	margin:0 0 0 20px;
	}
 
.sidebar_box {
	margin:10px 20px 0 0;
	color: #FFF; /* set the text color */
	background: url(images/sidebar_box.png) repeat-y top center; /* use center of image, and repeat vertically */
	width: 329px; /* same as image width */
	}
 
.sidebar_box h3 {
	margin:0;
	background: url(images/sidebar_box.png) no-repeat top left; /* use left portion of image for top bar */
	padding: 20px 25px 0px 10px; /* move text into real content area */
	}
 
.sidebar_mid {
	padding: 0 25px 40px 10px; /* move text into content area */
	background: url(images/sidebar_box.png) no-repeat bottom right; /* use right portion of image for bottom bar */
	margin: 0;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	}
 
.grey1 {
	background-color:#e8e8e8;
	padding:1px 6px 0px 4px;
	}
 
.grey2 {
	background-color:#f5f5f5
	}
 
.orange {
	border-top:1px solid #f29509;	
	}

view:
http://www.trulygooddesign.com/abs/rounded.html

thanks!!