CODEWITHSUNDEEP
htmlcss
Kaspar
Kaspar

Reputation: 80

Multiple div inside bottom div

I have problem when I align multiple divs with different height to bottom. I want all divs are at bottom (even "closed chat" from example). One solution is using 

position: absolute; 
bottom: 0; 
right XXpx;

but is there any other way to do it? I don't want to set right value with javascript.

Here is my example - http://jsfiddle.net/T3Evb/

Upvotes: 0

Views: 129

Answers (2)

Bruno
Bruno

Reputation: 6000

#chatbar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
}

.chat {
  display: inline-block;
  background-color: green;
  width: 200px;
  text-align: center;
  margin-right: 10px;
}

.chat.open {
  display: inline-block;
  height: 130px;
  vertical-align: bottom;
}
<div id="chatbar">
  <div class="chat open">
    Chat window
  </div>
  <div class="chat">
    Closed chat window
  </div>
</div>

I've removed the float css property, and changed the display behaviour of those divs to be inline-block.

At this point, the vertical-align css property permits to align the element as I please.

Upvotes: 2

Michael Antonius
Michael Antonius

Reputation: 972

it's easy: make one html tag as container and one more for absolute, like this:

<div class="chat">
   <div class="chat_contain">
      <div class="chat_window"></div>
   </div>
   <div class="chat_contain">
      <div class="chat_window"></div>
   </div>
</div>

and the css:

.chat{
   width:auto;
   display:inline-block;
   position:fixed;
   bottom:0px;
   right:0px;
 }
.chat_contain{
   position:relative;
   float:right;
 }
.chat_window{
   position:absolute:
   bottom:0px;
   left:0px;
 }

remember my code is for set up the position not for all stylesheets. edit it by yourself ad good luck

Upvotes: 0

Related Questions