Member Avatar for code739

here the link of an the image what i am expecting
http://s1302.beta.photobucket.com/user/havefwithme/media/layout_zps7366480f.png.html

but what i got is A(blue box) inherits the hieght of its mother container the b(red box)
here is my css

A{
    border:1px solid blue;
    width: 300px;
    float:right;
}

B{
    border: 1px solid red;
    position: fixed;
    bottom:0px;
    right:0px;
    height: 32px; 
    width:80%;
}
  • 2 Contributors
  • 4 Replies
  • 558 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by code739
Member Avatar for JorgeM

If you can post the rest of the HTML, it would be helpful. Maybe jsfiddle?

Member Avatar for code739

here's the html

<div id="B">
            <div id="A">
                <div class="chat-header" id="chat-head" onclick="show_chat()">
                    <b>Who's Online</b>
                </div>
                <div id="chat-inner-cont" >
                    <div style="padding:6px;color:#5d1a2c;height:500px;overflow:auto;font-size:12px;font-weight:bold" id="chat-names">
                        <!---Online users here-->
                    </div>
                    <div class="chat-header" style="text-align:center;height:30px;"><input type="text" placeholder="search names" style="width:90%;"/></div>
                </div>
            </div>
</div>
Member Avatar for JorgeM

Its really challanging to provide you with guidance when I really dont know what you are trying to do on the page except place two divs in that position. Take a look at the sample I put together, it may not work for you but at least guide you in the right direction...

<!doctype html>
<html>
<head>
<style>

#A {
    border:1px solid blue;
    width: 300px;
    float:right;
    height:80%;
    position:fixed;
    bottom:0px;
    right:0px;
}

#B {
    border: 1px solid red;
    position: fixed;
    bottom:0px;
    right:0px;
    height: 32px; 
    width:80%;
}

</style>
</head> 
<body>

  <div id="A">
    <div class="chat-header" id="chat-head" onclick="show_chat()">
       <b>Who's Online</b>
    </div>
    <div id="chat-inner-cont" >
      <div style="padding:6px;color:#5d1a2c;height:500px;overflow:auto;font-size:12px;font-weight:bold" id="chat-names">
      </div>
      <div class="chat-header" style="text-align:center;height:30px;">
         <input type="text" placeholder="search names" style="width:90%;"/>
      </div>
    </div>
  </div>
<div id="B"></div>

</body>
</html>

capture4

Member Avatar for code739

thanks for the reply
but #B should be the mother of #A
so that if there is a chat session between you and the other user like facebook
the chat box will be beside #A

in your code you just position #A and #B but they would not relate to each other once there are already
a chat session i want all the chatbox to be inside #B with like facebook

thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.