Welcome to WebmasterWorld Guest from 54.167.116.62

Forum Moderators: not2easy

Message Too Old, No Replies

scrolling divs and also bottom fixed content problem!

     

greencode

4:15 pm on Dec 15, 2012 (gmt 0)

5+ Year Member



I'm trying - and failing - to get something very similar in place to what you see when you go into your Facebook Messages page.

So I have a left sidebar (which should scroll on overflow) a message area which contains messages that are aligned to the bottom of the page (this area also needs to scroll on overflow) and then the write message container which needs to be fixed to the bottom of the page.

At the moment it's a mess! When you shrink your browser window's depth you'll see what I mean. The messages go over the header and dont' scroll within the message container. The only bit that seems to be working correctly is the left sidebar which is scrolling on overflow.

Any ideas or help would be greatly appreciated so I can try to enjoy the rest of my weekend!


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<style type="text/css">
html,body {
height: 100%;
margin: 0;
padding: 0;
}

.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
line-height:0;
visibility:hidden
}

.clearfix {
zoom:1
}

#header {
height: 100px;
background-color: #bcbed9;
border-bottom: 5px solid #fff;
}

.wrapper {
background-color:#fff;
position:relative
}

#col1,
#col2 {
float: left;
position: relative;
height: 100%;
}

#col1 {
width: 200px;
background-color: silver;
}

#col2 {
width: 400px;
background-color: gray;
}

#links-ctn {
height: 100%;
overflow-y: scroll;
}

.link {
padding: 50px 10px;
}

#message-ctn-wrapper {
height: 100%;
}

#message-ctn {
overflow-y: scroll;
position: absolute;
bottom: 0;
margin-bottom: 120px;
width: 400px;
}

.message {
padding: 30px 10px;
background-color: #f6f6f6;
margin-bottom: 1px;
}

#write-ctn {
height: 100px;
position: fixed;
bottom: 0;
background-color: #ddd;
width: 380px;
padding: 10px;
}

textarea {
width: 380px;
height: 100px;
}
</style>
</head>
<body>
<div id="header">Site header</div>
<div class="wrapper clearfix">
<div id="col1">
<div id="links-ctn">
<div class="link">
Link 1
</div>
<div class="link">
Link 2
</div>
<div class="link">
Link 3
</div>
<div class="link">
Link 4
</div>
<div class="link">
Link 5
</div>
</div>
</div>
<div id="col2">
<div id="message-ctn-wrapper">
<div id="message-ctn">
<div class="message">
Message 1
</div>
<div class="message">
Message 2
</div>
<div class="message">
Message 3
</div>
<div class="message">
Message 4
</div>
<div class="message">
Message 5
</div>
</div>
</div>
<div id="write-ctn">
<div id="write">
<textarea placeholder="Write your message here"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month