homepage Welcome to WebmasterWorld Guest from 50.19.144.243
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
scrolling divs and also bottom fixed content problem!
greencode




msg:4528437
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved