How do you stretch header, content & footer color across a page with everything being centered in a fixed width?


Tags: html,css

Problem :

I have got the header and main page content color to stretch the full page but still have the content centered.

However my footer isn't stretched, how do I stretch the footer like the header?

HTML:

<body> 
<div id="header"> 
    <div class="container"> <img src=   "images/webalign-uk-white.png" width="429" height="61" />
        <!-- header's content here --><p class="fltrt">Contact: 00000000000</p></div>
    <!-- .container --> 
</div><!-- #header --> 
<div id="content"> 
    <div class="container"> 
        <!-- main content here --><h1> Hello!</h1>

 <div id="footer">
    <div class="container"> 
        <!-- footer's content here --><p>Footer1</p>
  </div><!-- .container --> 
</div><!-- #footer --> 
</body>

CSS:

.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px; /* the auto value on the sides, coupled with the width, centers the layout */
}

#header {
    background-color: #eee;
}

#content {
    padding: 10px 0;
    background-color:#F9f9f9;
}

#footer {
    padding: 10px 0;
    background-color: #333;
    color: #bbb;
    clear: both;
}


Solution :

You didn't close the .container and #content divs. This might be the issue.


    CSS Howto..

    How to make a wavy border line to separate background images in html5/css?

    How to create javascript or css fadeInDown on mouseover?

    PHP / CSS How to work with themes for my site? [closed]

    Only show wordpress featured image when shared on social media

    How do I use the Bootstrap form select css with a Rails model?

    How to fix background Opacity css

    How can I prevent divs animated using CSS keyframes from colliding

    How to center a text which is placed on an image

    How to target Microsoft Edge with CSS? [duplicate]

    How do I hide the parent of a nested list while keeping the nested list visible?

    How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

    How to stop the navigation bar after scrolling?

    How to align elements so CSS fixed doesnt overlap on page load

    Disable the centring image function in a slideshow plugin?

    How to have images in line with text in css

    How to dynamically change a class css styling?

    How to center FontAwesome icon in css before content vertically

    How do i rotate text in css

    How to get table-row css and border property work together?

    How to exclude a child from the parent css property?

    How to keep images locked at specific height within Bootstrap container

    how to change button icon on click?

    How to select css id's with numbers in them?

    How to hide text behind image

    How center an absolute element (img) that's wider than its parent div?

    How to link a main.css to all Django templates? [closed]

    How do I make it impossible to highlight text using CSS?

    Double Scroll Bars kept showing in Windows Broswers

    How to show transition of an element that is expanding over nearby content?

    css: how to access a value that is not used by an element?