Question

I made a template with 2 columns with CSS like this picture.

The main div is main. It has 2 dives inside itself. DIV sider has a background-image. And I want to show it always. Now, I have 2 problems. First, it does not cover height of screen by default unldess I set a min-height=... for it. Second, if I do it, after scrolling the page, the background images won’t repeat to cover whole of screen height.

html {
    margin:0 0 0 0;
    height: 100%
}

body {
    font-family:Arial;
    font-size:9pt;
    color:#333333;
    line-height:200%;
    margin:0 0 0 0;
    background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
    width:100% !important;
    height: 100%
}

#main {
    width:100%;
    min-height: 100%
}

#sidebar {
    width:231px !important;
    float:left;
    background-image:url('../images/sidebar_bg.PNG');
    min-height: 100%;
}

#container {
    float:left;
    padding:25px 25px 25px 25px;
    width:70%;
    min-height: 100%
}

What’s the problem?

Edit: This is my backgroun image

Answer 1

Try this – DEMO 1 : Unwanted white space

The additional space in the bottom is because of your padding:25px; ( Same as padding:25px 25px 25px 25px;).There’s an extra top padding + bottom padding which is givin your div additional 50px.

If you do not want that additional space – Try this => DEMO 2 : without the white space

You can replicate the same effects of top and border 25px with this:

padding:0 25px;
margin:25px 0;

To avoid that extra unwanted space.

Edit:

The additional space is caused by the margin:25px 0;, if you remove it – you wont have that extra space.check this
DEMO 3 Removing unwanted space caused by Margin

Edit 2 :

Your problem is a well documented problem – Matching Columns Problem. There are loads of solutions you can try, here are a few :

1) javascript

2) Alter the Image (Hacky)

3) Pure CSS

My fav => Option 2

I havnt personally explored the last one,but try it out.. 🙂

Hope it helps..