CSS Forum

**fresh-d** · 06-28-2011, 12:22 PM

take a look at the picture you will see that the gray div doesn't cover 100% width of the browser.

http://swagblog.co.cc/Untitled-2.png

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

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Dime Machine: Central California Web Designing</title>
    
    <link href="main.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="body">
	<div id="header">
    	<div id="logo">
        	Dime Machine: Central California Web Designing
        </div>
        
        <div id="nav">
        	<ul>
                <li class="home"><a class="active" href="/index.html">home</a></li>
                <li class="services"><a href="info.html">info</a></li>
                <li class="portfolio"><a href="/portfolio.html">portfolio</a></li>
                <li class="contact"><a href="/contact.html">contact</a></li>
            </ul>
        </div>
	</div>
    
    <div id="slider_con">  
        <div id="slider">
        	<div id="slider_info">
                <h1>Peaceful Designs</h1>
                <p>Designs that will leave you relieved and satisfied as 
                new customers visit your new website.</p>
            </div>
        </div>
    </div>
    
    <div id="main">
    	<div id="boxes">
        	<div id="box1">
            	<h1>Flexible</h1>
                
                <img src="graphics/flexible.jpg" alt="Flexible"/>
                
                <p>I'm easy to work with unlike big companies that 
                push you around. You make the call, I deliver.</p>
            </div>
            
            <div id="box2">
            	<h1>Simple</h1>
                
                <img src="graphics/simple.jpg" alt="Simple"/>
                
                <p>I design websites that are simple and usable but also 
                stylish. Providing information without much effort.</p>
            </div>
            
            <div id="box3">
            	<h1>Professional</h1>
                
                <img src="graphics/professional.jpg" alt="Professional"/>
                
                <p>Years of experience with HTML, CSS 
                and Photoshop will create stunning 
                websites that will please you and your 
                visitors.</p>
            </div>
        </div>
        
        <div id="about">
        	<div id="intro">
            	<h1>In a nutshell..</h1>
                
            	<p>Dime Machine loves working with local business owners from central California. 
                You'll be suprised how a simple website could help out your business so much. 
                Customers want to know a little about you and your business before they do any 
                work with you, a website would do just that and more!</p>
            </div>
            
            <div id="testimonial">
            	<h1>Testimonial</h1>
                
                <p><!--"Easy guy to work with, fair pricing and fast turnaround." 
                <br /><br />-dutcherracing.com--></p>
            </div>
        </div>
    </div>
    
    <div id="footer-line">
    	Line
    </div>
    
    <div id="footer">
    	<ul>
        	<li>559-448-7560 -</li>
            <li>dimemachine@gmail.com</li>
        </ul>
    </div>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* Dime Machine - Main CSS */

body {
	font-family:"arial", "Century Gothic", Tahoma, "Lucida Grande", sans-serif;
	font-size:.80em;
	letter-spacing:.09em;
	color:#434343;
	font-weight:500;
}

h1{
	font-family:"Times New Roman", Times, serif;
	margin-bottom:-.1em;
	font-size:1.55em;
	font-weight:400;
	color:#262626;
}

/*h2{
	font-family:"Times New Roman", Times, serif;
	font-weight:500;
	color:#383838;
}*/

a:link 		{text-decoration:none; color:#797979; /*font-style:none*/; font-size:1em;}
a:visited   {text-decoration:none; color:#797979; /*font-style:none*/; font-size:1em;}
a:active    {text-decoration:none; color:#797979; /*font-style:none;*/ font-size:1em;}
a:hover     {text-decoration:none; color:#2a2923; /*font-style:none*/; font-size:1em;}

.active {
	font-style:italic;	
}

/* -------------------------------Body*/
#body{
}

/*---------------Header*/
#header{
	width:883px;
	margin:0 auto;
	height:34px;
	position:relative;
}
/* Logo */
#logo{
	background:url(graphics/logo.png);
	width:211px;
	height:34px;
	text-indent:-9999em;
	float:left;
}

/* Navigation */
#nav{
	float:right;
	position:absolute;
	right:2px;
	bottom:2px;
}

 #nav ul{
	margin:0;
	padding:0;
 }

 #nav li{
	display:inline; 
	padding:0px 0px 0px 40px;
 }
 
/* Slider */
#slider_con{
	background:#eef1f1;
	height:342px;
	position:relative;
}

#slider{
	width:883px;
	height:342px;
	margin:0 auto;	
	background:url(graphics/slider.jpg);
}

#slider_info{
	position:absolute;	
	bottom:0;
	width:883px;
}

#slider p{
	color:#b1b1b1;
	margin-left:14px;
	font-size:.9em;
}

#slider h1{
	color:#fdffd0;
	margin-top:0px;
	margin-left:14px;
	letter-spacing:.1em;
	margin-bottom:-.6em;
}

/* ----------------Main */
#main{
	width:883px;
	margin:0 auto;
}

/* 3 Boxes */
#boxes{
	width:883px;
	margin:0px 0px 0px 9px;;
}

#box1{
	width:294px;
	float:left;
}

#box1 p{
	padding-right:12px;	
}

#box2{
	width:294px;
	float:left;
}

#box2 p{
	padding-right:12px;	
}

#box3{
	width:295px;
	float:right;
}

#box3 p{
	padding-right:12px;	
}

/* In a nutshell... */
#about{
	clear:both;	
	border-top:1px solid #d1d1d1;
	width:883px;
	position:relative;
}

#intro{
	width:570px;	
	float:left;
	padding:5px;
}

#testimonial{
	float:right;	
	width:287px;
	padding:5px 5px 5px 15px;
	height:110px;
	position:absolute;
	top:5px;
	right:0;
	border-left:1px solid #d1d1d1;
}

/* Footer */
#footer{
	width:883px;
	margin:0 auto;	
	clear:both;
}

#footer ul{
	list-style-type:none;	
	padding:0;
	margin-top:-2px;
}

#footer li{
	padding:0;
	display:inline;
}

#footer-line{
	background-repeat:no-repeat;
	width:883px;
	background-image:url(graphics/footer-line.jpg);
	margin:0 auto;	
	clear:both;
	text-indent:-9999px;
}



/*                    Info Page */  
#title h1{
	margin-top:-.1em;
}

#title{
	border-bottom:1px solid #d1d1d1;		
	width:883px;
	margin:0 auto;
}

#content{
	margin:0 auto;
	margin-top:15px;
	margin-bottom:15px;
	width:883px;
}	

#mythoughts{
	width:650px;
	height:300px;
	float:left;
	margin-top:-5px;
}

#mythoughts p{
	margin-right:15px;	
	margin-left:10px
}

#process{
	width:223px;
	float:right;
	margin-top:-5px;
	border-left:1px solid #d1d1d1;	
}

#wediscuss{
	background:url(graphics/process/discuss.jpg) no-repeat;
	width:65px;
	height:69px;
	margin:0 auto;
	margin-top:4px;
}

#design{
	background:url(graphics/process/design.jpg) no-repeat;
	width:65px;
	height:69px;
	margin:0 auto;
	margin-top:4px;	
}

#approve{
	background:url(graphics/process/approve.jpg) no-repeat;
	width:65px;
	height:69px;
	margin:0 auto;
	margin-top:4px;	
}

#online{
	background:url(graphics/process/online.jpg) no-repeat;
	width:65px;
	height:69px;
	margin:0 auto;
	margin-top:4px;	
}

#arrow{
	background:url(graphics/process/arrow.jpg) no-repeat;
	height:35px;
	width:27px;	
	margin:0 auto;
}

#break{
	clear:both;
	text-indent:-9999px;
	height:6px;
}



/*                    Portfolio Page */  
#portoflio_content{	
}

/*                    Contact Page */  
#contact_details{
	width:223px;
	float:right;
	margin-top:-5px;
}

#contact_details p{
	margin-left:10px;	
}

#contact_content{
	width:650px;
	float:left;
	margin-top:-5px;
	border-right:1px solid #d1d1d1;	
}

would like to know how to make it go all they way across

**lizciz** · 06-28-2011, 12:34 PM

You're not giving us much to go on here, a link to the site would be better.
But it's probably something with margin or padding. Try setting the margin and padding to zero for any containing element and to the body.

**fresh-d** · 06-28-2011, 12:42 PM

swagblog.co.cc is the site

**Digital Friend** · 06-28-2011, 12:56 PM

Add "margin: 0px;" Via CSS to :

Code:

body {
	font-family:"arial", "Century Gothic", Tahoma, "Lucida Grande", sans-serif;
	font-size:.80em;
	letter-spacing:.09em;
	color:#434343;
	font-weight:500;
}

**fresh-d** · 06-28-2011, 01:04 PM

thanks u two for helping. digital friend u nailed it! thanks