Dynamic Height with CSS

Question

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;

}

Denison Luz · Accepted Answer · 2013-10-01 22:10:28Z

2

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.

answered Oct 1, 2013 at 22:10

Denison Luz

3,56525 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic Height with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related