CODEWITHSUNDEEP
twitter-bootstrapcss
Raheel Asad
Raheel Asad

Reputation: 25

width property is not working in css3

.chat-box{
  width:50%;
  height:360px;
  background:#f2f2f2;
  border:1px solid grey;		
}
<div class="container-fluid mrgn_cnt">
    <div class="row">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8 chat-box">
            <div class="whte_box"><!-- white box start-->
            </div>
            <!-- end of whitebox-->
        </div>
    </div>
</div>

I am using bootstrap framework. What I am trying to achieve is, width of 50% of class chat-box but width property is not working even if I add another property to class chat-box like display:block; still width property is not working.

I am expecting to work it as block level element, instead of it I got nothing is working except the background height border. I have tried everything and rechecked. I do not know what exactly is causing that problem?

Upvotes: 0

Views: 64

Answers (2)

Hezron
Hezron

Reputation: 352

Try this: 

.chat-box{
    width:200px;
    height:360px;
    background:#f2f2f2;
    border:1px solid grey;      
}

then remove col-sm-8

OR

add this:

.row{
    width:500px;     
}

then remove col-sm-8

Upvotes: 0

ab29007
ab29007

Reputation: 7766

This is happening because by using this bootstrap class col-sm-8 , you are setting it's width to 66.66%, either use class col-sm-6 instead of col-sm-8. or bring your .chat-box inside

<div class="col-sm-8">
    <div class="chat-box">
       <!-- white box start-->
       <div class="white_box">
       </div>
       <!-- end of whitebox-->
    </div>
</div>

and then apply width property accordingly

Upvotes: 1

Related Questions