How can I set the width of a div based on its width?
I would like to create a (input) CHAT stream view, like a UI, using HTML and CSS.
My problem is the width of the div. It fits like a fixed width. But I want it to be automatic based on the length of the content inside and able to grow up to 80% of the width.
I am using two classes .bubble-right
and .bubble-left
for aligning them using margins.
.bubble-left {
margin-top: 1%;
margin-right: 20%;
position: relative;
color: #000;
padding: 5px 20px 5px 20px;
background: #D5D9DB;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble-left:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 17px 12px 0;
border-color: transparent #D5D9DB;
display: block;
width: 0;
z-index: 1;
margin-top: -12px;
left: -17px;
top: 60%;
}
.bubble-right {
margin-top: 1%;
position: relative;
color: #fff;
margin-left: 20%;
padding: 5px 20px 5px 20px;
background: #5EC979;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble-right:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 0 12px 17px;
border-color: transparent #5EC979;
display: block;
width: 0;
z-index: 1;
margin-top: -12px;
right: -17px;
top: 60%;
}
When the CSS float property is used to align left and right , the width is correct, but all my divs are aligned on the same line.
I am looking for a solution in CSS and HTML.
source to share
You have to add background color to P inside your .bubble- (left | right)
i.e:.
.bubble-left, .bubble-right {
position: relative;
clear: both;
padding: 0 17px;
overflow: hidden;
margin-top: 1%;
}
.bubble-left {
margin-right: 20%;
}
.bubble-right {
margin-left: 20%;
}
.bubble-left p, .bubble-right p {
color: #000;
padding: 5px 20px;
line-height: 24px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: auto;
display:inline-block;
margin: 0;
}
.bubble-left p {
background: #D5D9DB;
float: left;
}
.bubble-right p {
background: #5EC979;
float: right;
}
.bubble-left:after, .bubble-right:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
margin-top: -12px;
top: 50%;
}
.bubble-left:after {
left: 0;
border-width: 12px 17px 12px 0;
border-color: transparent #D5D9DB;
}
.bubble-right:after {
right: 0;
border-width: 12px 0 12px 17px;
border-color: transparent #5EC979;
}
source to share
display: inline-block;
is your answer here, but you need a way to keep the blocks up queued. I would wrap each .bubble-left
and .bubble-right
another div, and then:
.bubble-right, .bubble-left { ... display: inline-block; ... }
Edit
Oh, also on .bubble-right
, on each container div
add text-align: right;
.
source to share
The trick is to float the bubbles left or right depending on their class and, importantly, clear the parent's floats. Don't specify fixed width or 20% margin as you indicated. Just give max-width
80% to keep it within limits.
This is how you could do it: (Demo script http://jsfiddle.net/abhitalks/hL5z0f37/ )
Snippet : (only relevant parts of the code)
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.container {
background-color: #eee;
margin: 8px;
height: 80%; width: 50%; /* this height and width is only for demo snippet */
overflow: auto;
}
.bubble { width: 100%; clear: both; } /* clear the floats here on parent */
.bubble p {
border-radius: 5px;
padding: 8px; margin: 8px 12px;
max-width: 80%; /* this will make it not exceed 80% and then wrap */
position: relative;
}
.left p { background-color: #ccc; float: left; } /* floated left */
.right p { background-color: #3c3; float: right; } /* floated right */
/* classes below are only for arrows, not relevant */
.left p::before {
content: ''; position: absolute;
width: 0; height: 0; left: -8px; top: 8px;
border-top: 4px solid transparent;
border-right: 8px solid #ccc;
border-bottom: 4px solid transparent;
}
.right p::after {
content: ''; position: absolute;
width: 0; height: 0; right: -8px; bottom: 8px;
border-top: 4px solid transparent;
border-left: 8px solid #3c3;
border-bottom: 4px solid transparent;
}
<div class="container">
<div class="bubble left"><p>msg</p></div>
<div class="bubble left"><p>long message</p></div>
<div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div>
<div class="bubble left"><p>lorem ipsum</p></div>
<div class="bubble right"><p>very long message</p></div>
</div>
source to share
To make the left bubbles look the way you want, you can make them float: left
. For the correct one you have to swim to the right. For all bubbles, you must use max-width: 80%
and use clear: both
.
.bubble-left {
margin-top: 1%;
margin-left: 10px;
position: relative;
color: #000;
padding: 5px 20px 5px 20px;
background: #D5D9DB;
border-radius: 10px;
float: left;
clear: both;
max-width: 80%;
}
Demo: http://jsfiddle.net/7mbaksvj/8/
source to share
You can use display:table;
to make the width of the elements the next content inside and make the element float:right
/ float:left
and use clear:both;
to make sure the next element on the next line
Demo: jsFiddle
example for correct content:
.bubble-right {
margin-top: 1%;
position: relative;
display:table; /* make display as table */
float:right; /* set float right */
clear:both; /* clear both */
pading-right: 16px; /* add padding */
}
.bubble-right:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 0 12px 17px;
border-color: transparent #5EC979;
display: block;
width: 0;
z-index: 1;
margin-top: -19px; /* re-positioning */
right: 0px; /* remove right position */
top: 60%;
}
source to share