overflow and float

Question

I have these html markup

    <div class="chatbar">
        <div class="chatbox" style="margin-right:0px"> first</div>
        <div class="chatbox" style="margin-right:5px"> chatbox</div>
        <div class="chatbox" style="margin-right:10px"> chatbox</div>
        <div class="chatbox" style="margin-right:15px"> chatbox</div>
             <div class="chatbox" style="margin-right:20px"> chatbox</div>
              <div class="chatbox" style="margin-right:25px"> chatbox</div>


    </div>

I want to have the chatbar div with horizontal scrollbar .. but its not working and here is my css

  .chatbox{
 float:right;

   height: 180px;
 width: 250px;
 margin-right:10px;
border-right:1px solid red;
border-left:1px solid red;
}

.chatbar {
border: 1px solid blue;
  overflow-x:scroll;
overflow-y:hidden;
width: 980px;
height: 200px;
position: relative;
bottom:10px;

 float:right;//

}

Elements are appending over each others.Hope to find solution for that.

H2ONOCK · Accepted Answer · 2013-03-30 20:07:45Z

1

Try adding a 'position:relative' into your .chatbox CSS?

    .chatbar { width:200px; overflow-x:auto; overflow-y:hidden; } 
    .wrapper { width: 600px; } 
    .chatbox { width:100px; float:left; } 

    <div class="chatbar"> 
        <div class="wrapper"> 
            <div class="chatbox"> first</div> 
            <div class="chatbox"> chatbox</div> 
            <div class="chatbox"> chatbox</div> 
            <div class="chatbox" > chatbox</div> 
            <div class="chatbox" > chatbox</div> 
            <div class="chatbox" > chatbox</div>  
       </div> 
   </div>

edited Mar 30, 2013 at 20:07

answered Mar 30, 2013 at 19:08

H2ONOCK

9811 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

H2ONOCK Over a year ago

What happens if you take the float off of .chatbox?

Rimon S Over a year ago

If I did that all chatbox divs are accumulated on one div .

H2ONOCK Over a year ago

hmmm, have you tried using 'display:inline-block' on either element? I'm looking into it now.

H2ONOCK Over a year ago

Okay, I think I have something of some use...you'll need to play around with dimensions as necessary but take a look at my edited answer above ^^

Rimon S Over a year ago

It's not working as expected ,,as some chatbox div are down the other ones

|

Collectives™ on Stack Overflow

overflow and float

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related