CODEWITHSUNDEEP
htmlcss
Questioner
Questioner

Reputation: 7463

Right position of DIVs in a pure CSS text chat simulation

I am trying to create the appearance of a text chat using pure CSS. The kind of text chat where one person's texts are represented by speech bubbles on the left of the screen, and the other persons are speech bubbles on the right side of the screen.

I'm almost there, and I've created a JSFiddle example. There are two problems.

The big problem is that the bubbles with the pointer on the right side, representing the person on the right, needs to be aligned on the right side. But I can't find a way to get them to align without floating them, and if I float them, then they overlap with other bubbles and create a mess.

How do I get the class bubble-right to stick to the right side?

The second issue is that I'm using display: inline-block; which makes it so that the bubbles are only as wide as the text. I had to put white-space: pre-line; in the containing DIV in order to get the bubbles to stack properly. Unfortunately, this is creating extra space. I tried putting in line-height declarations to prevent this, but it doesn't seem to have helped.

How do I get the bubbles to stack and alternate vertically without making extra whitespace I don't need?

Here is the CSS:

.bubble-dialog {
    white-space: pre-line;
    line-height:0;
}

.bubble-left,
.bubble-right {
    line-height: 100%;
    display: inline-block;
    position: relative;
    padding: .25em .5em;
    background: pink;
    border: red solid 3px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    margin-bottom: 2em;
}

.bubble-left {
    margin-right:10%;
}
.bubble-right {
    margin-left:10%
}

.bubble-left:after,
.bubble-left:before,
.bubble-right:after,
.bubble-right:before {
    content: "";
    position: absolute;
    top: 21px;
    border-style: solid;
    border-width: 13px 17px 13px 0;
    border-color: transparent pink;
    display: block;
    width: 0;
}

.bubble-left:after,
.bubble-left:before {
    border-width: 13px 17px 13px 0;
    border-color: transparent pink;
}

.bubble-right:after,
.bubble-right:before {
    border-width: 13px 0 13px 17px;
    border-color: transparent pink;
}

.bubble-left:after {
    left: -16px;
    border-color: transparent pink;
    z-index: 1;
}

.bubble-left:before {
    left: -19px;
    border-color: transparent red;
    z-index: 0;
}

.bubble-right:after {
    right:-16px;
    border-color: transparent pink;
    z-index: 1;
}

.bubble-right:before {
    right:-19px;
    border-color: transparent red;
    z-index: 0;
}

Upvotes: 1

Views: 3372

Answers (1)

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

I don't understand your second problem very well, but as for first problem you can add this css to your left and right classes:

I add clear:both and display:block and add float as you said, and right bubbles will stick at right side; here is a fiddle:

.bubble-left,
.bubble-right {
    line-height: 100%;
    display: block;
    position: relative;
    padding: .25em .5em;
    background: pink;
    border: red solid 3px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    margin-bottom: 2em;
    clear: both;
    max-width:50%;
}

.bubble-left {
    float: left;       
    margin-right:10%;
}
.bubble-right {
    float:right;
    margin-left:10%
}

And as for your second problem, I don't know why the spaces are there, but with removing bottom margin of the <p> tag it gets OK so I add margin-bottom:0 to <p> tag;

Upvotes: 3

Related Questions