PookyFan PookyFan - 1 month ago 10
CSS Question

CSS: how to make scrollbar appear outside div's border?

I'm creating some kind of chat box for my website and I can't make vertical scrollbar to appear outside the border.
This is what I'm getting:

My chatbox

All I want is that scrollbar to appear outside the border, on the right. It's not really pretty as it is now, is it.

The main HTML code (with one message insise the chatbox) of thix box looks like this:

<div id="sb_body">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>


My CSS code looks like this:

div#sb_messages_set
{
border: 2px solid black;
border-radius: 10px;
background-color: #0080E0;
overflow: auto;
height: 300px;
}
div.sb_message
{
margin: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
div.sb_message_header
{
clear: both;
display: block;
margin-bottom: 3px;
}
div.sb_message_author
{
display: inline;
text-align: left;
font-weight: bold;
}
div.sb_message_hour
{
display: inline;
float: right;
}
div.sb_message_content
{
clear: both;
text-align: left;
padding-bottom: 5px;
}


Is there any way to achieve what I want? I was looking for answer but didn't find anything that would solve my problem.

Oh, and if there's anything wrong with my code but it's not connected with my issue, please share your thoughts, I started having fun with creating websites pretty recently so it's possible that I make some newbie mistakes here and am not really aware of it.

Edit: important thing I forgot to mention about - I want the border to be fully visible all the time, I mean - I want just the messages to be scrolled, but wihout making the border be scrolled with it.
In other words, I don't want anything like that:

Do not want

In this picture the chatbox has been scrolled a little and the top and bottom frame isn't visible. But I want the entire frame to be visible despite div's content being scrolled.

Answer

Well, if that won't work, and you're married to the design, I think you have to use a bg image. I can't find a way to style the scrollbar with CSS. I made another jsfiddle with this solution demonstrated: http://jsfiddle.net/jlmyers42/mrx46geg/

But basically, you just move some of your CSS around:

#sb_body {
  width: 272px;
  height: 300px;
  overflow: auto;
  padding: 0;
  margin: 0;
  background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
  margin: 5px;
}
div.sb_message {
  padding: 2px 4px 5px 4px;
  border-bottom-style: dashed;
  border-width: 1px;
  border-color: black;
}