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
  • 552 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by code739

Recommended Answers

All 4 Replies

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.