Stretched nav and footer

I want my navigation and footer both stretched. How to that in css i tried several ways but i failed :\
Look at that preview image i want the content to be in middle aligned while navigation and footer fully stretched.

 

Separate 3 content blocks (header, main content, footer) into divs within a div, then center the content div, the header and footer will remain stretched as are

Possible example I whipped up ~ Each box is a div, add as many divs as you would like so you can change properties for each content you have

 

use

margin: 0px auto;

Code (CSS):

on the container div above.

 

Iam using divs (Wrapper,Header,content,sidebar,footer).
The thing is i want the nav which is in header to stretch to maximum width like width:100% and footer:100% but when i do it one of them stretches to full the other doesn't.

 

I kind of have to see your HTML and CSS before I can truly help you, I'm flying blind atm.

 

Css

/*
Theme Name: TechDosagev1
Theme URI: http://www.techdosage.com
Description: Tech Dosage custom theme
Version: 1.0
Author: Abdul Haseeb Rahmani
Author URI:
*/
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body{  
    font-family: Open Sans, Helvetica, Georgia, Sans-serif;
    font-size: 14px;
    background: #fff;
    color: #000000;
    float:left;
    margin: 0;
    padding: 0;

}
a:link, a:visited{
    text-decoration: none;
    color: #000000;
}
a:hover{
    color: #5f5f5f;
}
h1 {
    font-size: 54px;
}
h3 {
    font-size: 24px;
}
/* Container */
#wrapper{
   margin: 0 auto;
    text-align: left;
    background: #fff;
    padding: 20px;
width:1020px;   
}
#header{
    width: 1000px;
    height: 100px;
}

.logo{
    width: 330px;
    height: 101px;
    background-image: url("images/logo.png");
    float:left
}
/* Content */
#blog{
    float: left;
    width: 650px;
    padding: 0 10px 10px 10px;
    margin-top: 10px;
    margin-right:25px;
    margin-bottom: 10px
}
/* Sidebar */
.sidebar{
    float: left;
    width: 300px;
    margin-top: 10px;
    font-size: 14px;
    list-style: none;
}
/* Navigation */
.nav{
    min-width:100%;
    background: #444444;
    display:block;
    float:left;
    position:absolute;
    height:40px;
    list-style-type:none;
    font-weight: semibold;
    font-size:14px;
    border-bottom: 3px solid #ed7602;
    right:0px;
    padding:none
   
}

.nav a{
position:relative;
top:10px;
font-size:14px;
color:#fff
}
.nav li{
    display:inline;
margin-top:50px;
}

.nav li a:hover{
border-bottom:2px solid #02bcdd
}

.navtop{
position:absolute;
top:-15px;
left:0px;
right:0px;
min-width:100%
}

#respond {
background: #ececec;
padding:0 5px 0 5px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

#author {
font-family: Lobster, "Lobster 1.4", "Droid Sans", Arial;
font-size: 16px;
color:#1d1d1d;
letter-spacing:.1em;
}

#url  {
color: #21759b;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}

#submit {
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
}

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
  background: -moz-linear-gradient(top, #003366, #006ad4)
}

/*Comment Output*/
.commentlist .even .comment {
background-color:#ccddf2;
}
.commentlist .odd .comment {
background-color:#CCCCCC;
}

.comments-area article header {
    margin: 0 0 48px;
    overflow: hidden;
    position: relative;
    background-color:#55737D;
    color:#FFFFFF;
    padding: 10px;
}

.reply {
    float:right;
    margin:0 10px 10px 0;
    text-align:center;
    background-color: #55737D;
    border:1px solid #55737D;
    border-radius:3px;
    padding:3px;
    width:50px;
    box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
    padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
    color: #FFFFFF;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
    color: #f6e7d7;
}

/* Searchbox Style */
.search-form {
height:32px;
width:240px;
top:40px;
right:-30px;
float:right;
position:absolute;
top:18px;
color: #fff;
}

.search-field {
background-color: #727272;
height:30px;
width:150px;
line-height: 1.2em;
border-style: none;

}


.search-submit {
height:30px;
width:50px;
background-color: #ed7602;
border-style:none;
color: #fff;
text-shadow: 0px 1px 0px #a20101;
font-weight:bold
}


.entry{
margin:0px 0px 75px 0px;
padding:8px 24px 0px 4px;
float:left;

}

.post {
padding:0px;
margin:0px;
float:left
}


.pst{
float:left;
display:inline;

}

.attachment-post-thumbnail {
    float: left;
    margin-right: 10px;
    background-color: white;
    padding:1px;
    border:1px solid black;
    margin-top:4px;
    width:600px;
    height:130px;
}

.postmetadata {
display:inline
}

/* Footer */
#footer{
height:150px;
background-color: #efeaea;
min-width:100%;
border-top: 3px solid #ed7602;
padding-top:10px;
padding-left:10px;
padding-right:10px;
float:left
}

Code (CSS):

Index

<?php get_header(); ?>
   
    <div id="blog">
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        
        <div class="post">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
       
       <p class="postmetadata">
        <?php _e('Filed under&#58;'); ?>
        <?php the_category(', ') ?>
        <?php _e('by'); ?>
        <?php  the_author_posts_link(); ?>
      <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
             </p>
           
            <div class="entry">  
             <p class="pst"> <span class="pstf"><?php the_post_thumbnail(); ?></span>
              <?php the_content('Read More...'); ?></p>

            </div>
        </div>
<?php endwhile; ?>
        
     <div class="navigation">
        <?php posts_nav_link(); ?>
        </div>
        
        <?php endif; ?>
    </div>
<?php get_sidebar(); ?>  
<?php get_footer(); ?>

PHP:

Header

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title> <?php wp_title('|', true,'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php
/* For threaded Comments if any */
if(is_singular() && get_option('thread_comments'))
wp_enqueue_scripts('comment_reply');

wp_head();
wp_get_archives('type=monthly&format=link');
?>
</head>
<body>
<div class="navtop">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' )); ?>
<div class="search-form">
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
    <label>
        <input type="search" class="search-field" placeholder="Search Here" value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Go" />
</form>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="header">
<a href="<?php echo get_option('home'); ?>"><div class="logo">
</div></a>

</div>

HTML:

Footer

</div>
</div>
<div id="footer">
<p cl>scroll to top</p>
    <p>Copyright</p>
    </div>
</body>
</html>

HTML:

 

As I understand from your question: you want the “nav” and “footer” to fully expand to the horizontal space, like Jahbox said separate them in 3 different divs to make it easy to control, and the correct option will be: “width:auto” not “width:100%”.
Or did you try it?

 

I have done fixed it already thanks