How to have a centered layout with border (background-image), and footer sticked to the bottom?


Tags: html,css

Problem :

I've lost alot of time to try to make this work, but with no success. What I want is to have a div footer and to have a border around the whole website has I use a centered layout of 960px.

I've based myself on two tutorials: CSS and round corners: Boxes with curves and How to Use the Sticky Footer Code

What happens is if I define a min-height:100% the footer is ok, but the border does not goes all the way down if a scroll is needed, if I set an height:100% the footer does not stay down but the border is ok.

Can anyone help?

The main html is:

<div id="border">
   <div class="content">...</div>
   <div class="footer">...</div>
</div>

And css is:

#border
{
   background: url("../Content/Images/border.png") repeat-y;
   width:978px;
   margin:auto;
   /*min-height:100%;*/
   height: 100%;
}


.footer
   {
    height: 116px;
    width: 960px;
        margin-left:auto;
        margin-right:auto;
        background-image: url("../Content/Images/footer_background.png");
        background-repeat: repeat-x;
        position: relative;
        margin-top: -116px;
        clear: both;
       }
       .content
       {
          min-height:100%;
          width:960px;
          margin:auto;
          background-color: #EAFFE6;
       }


Solution :

I suggest you to use the #border div as 960px width and then add the background attribute with the border to the entire body:

body
{
   background: url("../Content/Images/border.png") repeat-y;
}

    CSS Howto..

    How to force Chrome browser to reload .css file while debugging in Visual Studio?

    How to edit .css file from html via jquery

    Font not showing properly in HTML page

    How to set same height each list items?

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    How to make a hidden border side inherit border properties in CSS

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    how can we use and control Gradient

    How to align two text boxes on same line with CSS

    How to align text under image using HTML/CSS?

    css how to make two div side by side

    How can I make the ul contain li in its content box?

    Entire window becomes blur after a modal is shown jQuery why?

    How to align an image of any size from the centre, rather than the top/bottom/sides, using css

    R: Shiny: How to align a gvisTable to the center in shinyapp

    How To Add Links To Right Of Header?

    How do I remove a CSS class from a jqGrid cell?

    I have a blinking box, how can I add a gradient to this or program it easier?

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    How to display items side by side until window width then in next row

    JavaScript / Jquery : How to find line-through words

    How to set the background image width using CSS?

    How is this fluid column layout changing to single-column as page narrows?

    How do I join my list and div using css?

    How to add space between border line and menu item

    How to create rating system using only css [duplicate]

    How do I add or change the class attribute of a JSF dataTable (primefaces)?

    How to make a img flicker using css(should work in all browsers)

    How to create a natural-looking line using css and maybe javascript? [closed]

    Difference in css position IE/FF, how to solv my problem?