homepage Welcome to WebmasterWorld Guest from 54.145.209.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
scrolling divs and also bottom fixed content problem!
greencode

5+ Year Member



 
Msg#: 4528435 posted 4:15 pm on Dec 15, 2012 (gmt 0)

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>

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved