CODEWITHSUNDEEP
csscss-float
Matthias
Matthias

Reputation: 928

Positioning absolute and relative elements with css

I tried to position html elements, but a failed badly. My html code is quiete simple:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
    <header>Header</<header>
    <div>
        <div id="sidebar">
            Sidebar
        </div>
        <div id="content">
            <br/><br/>
            Content
            <br/><br/><br/>
        </div>
    </div>
    <footer>Footer</footer>
</body>
</html>

And the associated css file:

* {
    font-size: larger;
    text-align: center;
}

body{
    background-color: #888888;
    margin: 0;
}

header{
    background-color: #ffff88;  
}

#content{
    background-color: #ff8888;  
}

#sidebar{
    background-color: #88ff88;
    float: left;
    width: 300px;
}

footer{
    background-color: #8888ff;  
}

At the end the site should look like: Sketch of the side

With a relative Header, footer and Content. The sidebar should have it's own scroll bar and should be behind footer and header, if they are in view.. Like here: enter image description here

But the footer should always be on the bottom or "topsy". The withe and transparent box should be clipping you can see currently in your browser.

When I tried to du this I got this mistakes: enter image description here The Footer is not at the bottom, when the Content is too small.

Or: The footer is not at the bottem, when I scrolled down. enter image description here

Does someone know how to handle this issue with css?

Thank you very much!

Upvotes: 1

Views: 1129

Answers (4)

Matthias
Matthias

Reputation: 928

After a while a friend of mine helped me to get a nice solution, without JavaScript for the footer. Last one is difficult to realize if, the Content or the size of the page changes. Here is the solution we found (with a simple JavaScript for the fixed sidebar). the html-file:

<html>
    <head>
        <title>Footer Test</title>
        <link rel="stylesheet" href="main.css">
        <script>
            function posSidebar(event){
                var b = document.getElementById('wBox').clientHeight;
                var w = window.innerHeight;
                var s = window.pageYOffset;
                document.getElementById('sidebar').style.top = Math.max(0, 30-s) + "px";
                document.getElementById('sidebar').style.bottom = Math.max(w-b+s-0,0) + "px";
            }
            window.onscroll = posSidebar;
        </script>
    </head>
    <body>
        <div id="wBox">
            <header>
                <p>Header</p>
            </header>
            <div id="body">
                <div id="sidebar">
                    <p id="log">Sidebar</p><p id="log1">Sidebar</p><p id="log2">Sidebar</p><p id="log3">Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                </div>
                <div id="content">
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>                  
                </div>
            </div>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    </body>
</html>

And the css-file:

*{
    margin:0;
    text-align: center;
    font-size: 16px;
}

body{
    position: absolute;
    width: 100%;
    bottom: 30px;
    top: 0px;
    background-color: #999;
}


div#wBox{
    min-height: 100%;
    background-color: #666;
    position: relative;
}

footer{
    height: 30px;
    background-color: #9f9;
    width: 100%;
}

#sidebar{
    position: fixed;
    top: 30px;
    bottom: 0px;
    left: 0px;
    width: 200px;
    background-color: #f99;
    overflow: auto;
}

#content{
    position: relative;
    background-color: #ff9;
    margin-left: 200px;
}

header{
    height: 30px;
    width: 100%;
    background-color: #99f;
}

Upvotes: 0

hityagi
hityagi

Reputation: 5256

Check out this fiddle :[UPDATED 2]

http://jsfiddle.net/thecbuilder/g5Uk3/1/

css

.header, .footer {
    width:100%;
    text-align:center;
    z-index:200;
    left: 0;
    right: 0;
    display: block;
}
.header {
    position: absolute;
    top:0;
    background-color: #ffff88;
}
.footer {
    position: absolute;
    background-color: #8888ff;
}
.content {
    width:80%;
    margin-left:20%;
    display:inline-block;
    background-color: #ff8888;
    color:white;
    position: relative;
}
.sidebar {
    bottom:0;
    top:0;
    left:0px;
    position:fixed;
    overflow-y:scroll;
    width:20%;
    display:inline-block;
    background-color: #88ff88;
    color:white;
    z-index:100;
}

html

<div class="header">Header</div>
<div class="main">
    <div class="sidebar">
        <p>Side bar</p>
    </div>
    <div class="content">
        <p>Content</p>
    </div>
</div>
<div class="footer">Footer</div>

To keep footer at bottom when content is less : http://jsfiddle.net/thecbuilder/g5Uk3/2/

add this jQuery Script - 

<script>
$(function(){
    $(function () {
        var bht = $('body').height();
        var wht = $(window).height();
        if (bht < wht) {
            $('.footer').css("bottom", "0px");
        }
    });
});
</sctipt>

Upvotes: 1

Alex Szabo
Alex Szabo

Reputation: 3266

For #sidebar you should add

position: fixed;
left: 0px;
top: 80px;

(the top value should be based on the header's height)

Similarly to #footer 

position: absolute;
bottom: 0px;
overflow: hidden;

This should help you achieve what you are looking for. Let me know if this helped, or not, and I'll try to assist in this.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to clear the float value:

<header>Header</<header>
    <div>
        <div id="sidebar">
            Sidebar
        </div>
        <div id="content">
            <br/><br/>
            Content
            <br/><br/><br/>
        </div>
    </div>
    <br clear="all" />
    <footer>Footer</footer>

Upvotes: 0

Related Questions