2

I'm using the Skeleton theme on this website.

What I'd like to do is have the header & footer to "fill" all horizontal space of the screen, while having the main content staying as is.

I've looked at several other threads, but I couldn't manage to make my way to the solution with the Skeleton theme.

1

There are many ways to achieve this.

First of all, right now all your content (including the header and footer) are inside a .container with a width of 960px. You cannot get these div's to be 100% in width when they are inside this container. So what you need to is to change your code by moving the header and footer outside of the container. I've created a sample here.

UPDATE!

In header.php after the body tag:

<?php st_above_header();?> 
<?php st_header();?> 
<?php st_below_header();?>
<?php st_navbar(); ?>
    <div id="wrap" class="container"> 

in footer.php right before the body tag:

   </div> <!-- End container -->

   <?php st_before_footer();?>
   <div class="inner-wrap"><?php wp_footer();?></div>
   <span class="border"></span>
   <?php st_after_footer();?>

   </div> <!-- End page container -->

CSS:

#footer {
margin:0;
height:auto;
width:100%;
bottom:0;
/* stick to bottom */
background:#0C2044;
border-top: 7px solid #549290;
}
#header {
margin:0;
width:100%;
border-bottom: 7px solid #DD013F;
}
.inner-wrap, .inner, #megaMenu {
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;
}
#page-container {
position:relative;
/* needed for footer positioning*/
margin:0 auto;
/* center, not in IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* real browsers */
height:100%;
/* IE6: treaded as min-height*/
min-height:100%;
/* real browsers */
}
.border {border-top: 7px solid #DD013F;width:100%; height:7px; float:left;}
#navigation {
margin: 0 0 1.5em;
width: 100%;
background: #549290;  
}
#megaMenu.megaFullWidth {
width:100%;
max-width:960px;
}
  • First of all thank you very much for taking the time to reply. I pasted the css code in my theme css, but I guss I have to paste something somewhere in my template .php files right ? Thanks ! – Tryna Code Aug 26 '13 at 12:26
  • Yeah but don't just copy and paste all the CSS from the sample because you only need parts of it. The HTML code is located either in index.php or home.php. I'm gonna change the sample markup a bit so you would get a feeling where I'm going at. – Laniakea Aug 26 '13 at 12:38
  • I'm not really sure I understand the off topic message : should wordpress questions be asked somewhere else, or is it something specific I could fix in my question to be allowed to ask it here ? Thanks – Tryna Code Aug 26 '13 at 14:52
  • The only thing related to wordpress in your question is that you're site runs on wordpress. But your question is mostly about HTML/CSS, and should be asked at Stack Overflow. But nevertheless I'm willing to help you out. – Laniakea Aug 26 '13 at 15:44
  • I understand, thanks Martin. Well, if this doesn't end up putting your in trouble, I'd like your help. I looked at your fiddle, and I realize my question wasn't clear. What I'd like to be full width is actually the background color only, not the logo, the menu content or any kind of text. I'd like only the colored background to span full width.(blue color + red line for header and green line, blue color and red line for footer). Thanks ! – Tryna Code Aug 26 '13 at 16:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.