CODEWITHSUNDEEP
javascripthtmlcss
Diego
Diego

Reputation: 964

Dynamic Height with CSS

I am doing a comment page. I have a json with all the comments, this comments go in one bubble speech. The problem is the comments can varied their size, and I want to have the bubble speech according to the size of the comment. An example

enter image description here

As you can see the top of the bubble speech are not align. Here is the demo: http://jsbin.com/uLuvaWU/1.

I decided to make the change to dynamic because I was having a lot of white space in some bubble speech. Example: http://jsbin.com/OrIWAr

Not sure what I have to change from my CSS

.bubble-panel {
    display: inline-block;
    border: 1px dotted #CCCCCC;
    height: 350px;
    position: relative;
    margin: 20px;
}


.bubble 
{
position: relative;
width: 350px;
height: auto;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
vertical-align: middle; /* ADD THIS LINE */
}

.bubble p
{
    margin: 10px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 14px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -14px;
bottom: -31px;
left: 20%;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 39px 22px 0;
border-color: #46A5E4 transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -22px;
bottom: -48px;
left: 20%;
}
.caption {
    //border: 1px solid red;
    width: 20em;
    font-size: 14px;
    line-height: 1.5;
    position: absolute;
    bottom: auto;
    right: 0px;
}
.caption h1, .caption h2, .caption h3 {
    font-size: 1.00em;
    text-align: left;
    margin: 0;

}

Upvotes: 0

Views: 495

Answers (1)

Denison Luz
Denison Luz

Reputation: 3565

I have changed a bit the class .bubble-panel on your CSS. (http://jsbin.com/uLuvaWU/2)

 .bubble-panel {
    display: inline-block;
    border: 1px dotted #CCC;
    height: 350px;
    position: relative;
    margin: 20px;
    top: 0;
    float: left;
  }

Tested on Chrome, Firefox and Safari and top of the bubble speechs are now aligned.

Upvotes: 2

Related Questions