CSS having a "real" space at "position:fixed" element (prev element not overlapping a current fixed one)

Question

I have a layout with two horizontal columns (left one is fixed) and a bottom footer (fixed as well) which is bellow the second (content) column.

When I apply a border to a second (content) column I get it going through the footer to the bottom of the page, whilst I need a bottom border of it to be about 50px above the footer.

I need this because I am going to apply a background image to a content, which should not go through (or even touch) the footer, and left column as well (which is not a problem for now)

Somebody please help me to solve my problem.

Here is a code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            html
            {
                height:100%; 
                max-height:100%;  
                padding:0; 
                margin:0; 
                border:0; 
                background:#fff -18px 0 no-repeat; 
                overflow: hidden; 
            }

            body
            {
                height:100%;
                max-height:100%;
                overflow:hidden;
                padding:0;
                margin:0;
                border:0;
            }

            #content
            {
                display:block;
                height:100%;
                max-height:100%;
                overflow:auto;
                padding-left:240px;
                position:relative;
                z-index:3;
            }

            #head
            {
                position:fixed;
                margin:0;
                top:0;
                right:18px;
                display:block;
                width:100%;
                height:100px;
                background:#ddd;
                z-index:5;
                color:#fff;
            }

            #foot
            {
                position:fixed;
                margin:0px;
                bottom:-1px;
                right:18px;
                display:block;
                width:80%;
                height:50px;
                background:rgb(214,100,50);
                color:#fff;
                text-align:right;
                z-index:4;
            }

            #left
            {
                position:fixed;
                left:0;
                top:0;
                height:100%;
                width:200px;
                background:#aaa;
                background-position:0 100px;
                color:#fff;
            }

            * html #head, * html #foot,* html #left
            {
                position:absolute;
            }

            #pad1
            {
                display:block;
                width:18px;
                height:100px;
                float:left;
            }
            #pad3
            {
                display:block;
                width:18px;
                height:50px;
                float:left;
            }
            .pad2
            {
                display:block;
            }
        </style>
    </head>

    <body>

        <div id="foot">
            <div id="pad3"></div>
            <br />
            {footer}
        </div>

        <div id="left">
            <div class="pad2"></div>
            {menu}
        </div>

        <div id="content">
            <div style="border:2px solid blue;">
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />

            </div>
        </div>
    </body>
</html>

I would be very thankful if somebody will help me out.

Here is an image link (a visual) for my problem: http://postimage.org/image/h46ilcfgr/

score 0 · Answer 1 · answered Oct 23 '12 at 17:25

0

Since your footer is a fixed height, you can use a margin to get what you want.

I changed

<div style="border:2px solid blue;">

to

<div style="border:2px solid blue; margin-bottom:75px;">

answered Oct 23 '12 at 17:25

Becuzz

6,846
26
39

Thanks, but problem still remains, because when you do not scroll to the bottom of page an element still overlaps a footer, therefore blue border still is at the bottom. Only when you scroll to the bottom a problem appears to be solved, but unfortunately it still exists. – Davit Oct 23 '12 at 17:28

score 0 · Answer 2 · edited May 23 '17 at 10:26

Added one more element under footer but over #content with background-color:#fff, containing another element with the 240 px left margin and blue border-top.

Removed the #footer's {right:18px} you've had because of scrollbar (scrollbars can be different, see How to calculate the width of the scroll bar? for how to count it)

Made the content flow within the body, so that scrollbar used is that one of body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        html
        {
            height:100%; 
            max-height:100%;  
            padding:0; 
            margin:0; 
            border:0; 
            background:#fff -18px 0 no-repeat; 

        }

        body
        {
            height:100%;
            max-height:100%;

            padding:0;
            margin:0;
            border:0;
        }

        #content
        {
            display:block;

            padding-left:240px;
            position:relative;
            z-index:3;
        }

        #head
        {
            position:fixed;
            margin:0;
            top:0;
            right:18px;
            display:block;
            width:100%;
            height:100px;
            background:#ddd;
            z-index:5;
            color:#fff;
        }

        #foot
        {
            position:fixed;
            margin:0px;
            bottom:-1px;
            right:0;
            display:block;
            width:80%;
            height:50px;
            background:rgb(214,100,50);
            color:#fff;
            text-align:right;
            z-index:5;
        }

        #left
        {
            position:fixed;
            left:0;
            top:0;
            height:100%;
            width:200px;
            background:#aaa;
            background-position:0 100px;
            color:#fff;
            z-index:6;
        }

        * html #head, * html #foot,* html #left
        {
            position:absolute;
        }

        #pad1
        {
            display:block;
            width:18px;
            height:100px;
            float:left;
        }
        #pad3
        {
            display:block;
            width:18px;
            height:50px;
            float:left;
        }
        .pad2
        {
            display:block;
        }

        #underfooter{ background-color:#fff; position:fixed; bottom:0; width:100%; height:100px; z-index:4; }
        #underfooter .padding{ margin-left:240px; border-style:solid; border-width:2px 0 0; border-color:blue; }
    </style>
</head>

<body>

    <div id="foot">
        <div id="pad3"></div>
        <br />
        {footer}
    </div>

    <div id="underfooter">
        <div class="padding">
        {under footer}
        </div>
    </div>

    <div id="left">
        <div class="pad2"></div>
        {menu}
    </div>

    <div id="content">
        <div style="border:2px solid blue;">
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />

        </div>
    </div>
</body>

CSS having a "real" space at "position:fixed" element (prev element not overlapping a current fixed one)

2 Answers2