I want to make a tool tip for drop down but am having problem in the arrow please can some one position it the way i want it thank you
Here is what i get
I want it to look like this
Here is my CSS code
<style>
#wrapper-err {
position: absolute;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
z-index: 2222;
width:210px;
height:90px;
margin-top:2em;
margin-left:2em;
}
.err-tip {
background-color: #D03B3E;
color:#fff;
padding:0.5em;
}
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 18px solid #D03B3E;
position: absolute;
top: -18px;
left: 50%;
margin-left: -4px;
display: block;
}
.err-tip div{
margin: 0px;
border: 0px none;
font: inherit;
vertical-align: baseline;
outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
</style>
HTML
<div class="err-tip" id="wrapper-err">
<span class="err-close">X</span>
<p>hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc.</p>
</div>
just change the arrow border like this:
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 18px solid #D03B3E; /* changed from top to bottom */
position: absolute;
top: -18px;
right: 25px; /* change the horizontal position */
margin-left: -4px;
display: block;
}
Here is a snippet:
#wrapper-err {
position: absolute;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
z-index: 2222;
width:210px;
height:90px;
margin-top:2em;
margin-left:2em;
}
.err-tip {
background-color: #D03B3E;
color:#fff;
padding:0.5em;
}
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 18px solid #D03B3E;
position: absolute;
top: -18px;
right: 25px;
margin-left: -4px;
display: block;
}
.err-tip div{
margin: 0px;
border: 0px none;
font: inherit;
vertical-align: baseline;
outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
<div class="err-tip" id="wrapper-err">
<span class="err-close">X</span>
<p>the text.</p>
</div>
Related
I am trying to create a speech bubble with an arrow on the left and right side. Something like below
I have used the below CSS to achieve the same :
.speech-wrapper{
padding: 30px 40px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #c7edfc;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.chatbox_other{
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #D3D3D3;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.name_other{
font-weight: 600;
position: absolute;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
bottom: 8px;
right: 10px;
}
.timestamp_other{
font-size: 11px;
position: absolute;
text-align: left;
bottom: 0px;
left: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 8px;
right: 10px;
text-transform: uppercase; color: #999
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
}
.bubble-arrow {
position: absolute;
width: 0;
bottom:42px;
left: -16px;
height: 0;
&.alt{
right: -2px;
bottom: 40px;
left: auto;
}
}
.bubble-arrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 9px solid #c7edfc;
border-radius: 0 20px 0;
width: 15px;
height: 30px;
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
But for me, the arrow is missing always it always comes with a box.
I am a beginner to HTML and CSS any help on this will be appreciated.
Am I doing anything wrong to draw the rectangle?
EDIT:
I can see the chat bubble on chrome and all recent browsers but when I try using the very old browsers the below statement does not decode correctly. So the chat triangle was not in the appropriate position.
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
HTML CODE:
<div class="speech-wrapper"><div class="chatbox"><div class="txt"><p class="name">TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div><div class="bubble-arrow alt"></div></div>
Is there anything else can I use apart from the transform
Try this,
<!doctype html>
<html>
<head>
<title>Chat Bubbles Demo</title>
<style type="text/css">
.chat-box
{
width: 300px;
}
.header
{
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages
{
padding: 10px;
height: 200px;
background-color: green;
background-color: rgb(237, 239, 244);
border-width: 1px;
border-color: black;
border-style: solid;
overflow-y: scroll;
}
.messages ul
{
padding: 0px;
list-style-type: none;
}
.messages ul li
{
height: auto;
margin-bottom: 10px;
clear: both;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.left
{
float: left;
}
.messages ul li span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
.input-box
{
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea
{
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="header">
Narayan Prusty
</div>
<div id="messages" class="messages">
<ul>
<li>
<span class="left">Hello</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Are you there?</span>
<div class="clear"></div>
</li>
<li>
<span class="right">Yes I am here</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Thanks for accepting my friend request</span>
<div class="clear"></div>
</li>
<li>
<span class="right">You Welcome</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Bye</span>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="input-box">
<textarea placeholder="Enter message"></textarea>
</div>
</div>
</body>
</html>
This question already has answers here:
How do I center an anchor element in CSS?
(14 answers)
Closed 5 years ago.
For some reason, this <a> tag won't align to the horizontal center. What needs to be done in order to fix this?
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Wrap it in a DIV tag that has text-align: center;:
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
.x {
text-align: center;
}
<div class="x">demo</div>
Used margin: 0 auto; for centering and changed a tag to display: block; Also added a width to it.
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
width: 50px;
display: block;
margin: 0 auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
You have to make a tag a block element.So rather than inline-block use display:block.And to center use margin:0 auto;
.button {
display: block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.myButton {
width: 150px;
margin: 10px auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
demo
The "a"-Element is contained in another Element. In the case of your example it is in the Body-Element. This Element need to have its elements centered, so you would need to set a rule like this:
body {
text-align: center;
}
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
text-align: center;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
body {
text-align: center;
}
demo
.button {
display: inline-block;
position: absolute;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: calc(50% - 88px);
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Just change yours .button class CSS to this one:
.button {
display: inline-block;
position: absolute;
width: 20px;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
It will surely work. Thanks.
Use transform to do the trick.
.button {
left: 50%;
transform: translateX(-50%);
}
.button {
left: 50%;
transform: translateX(-50%);
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none !important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
I've got an issue with my chat window, every long message overflows onto the x, and I'm trying to force it to over flow onto the height / y axis, I've tried adding overflow-x:none; and height:auto;, but doesnt seem to work.
This is what it looks like:http://www.socialnetwk.com/chatbug.png
Here is my code:
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height:auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content:"";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content:"";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content:"";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content:"";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display:none;
visibility:hidden;
}
</style>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
</div>
Add this CSS property
.messages ul li span {
word-wrap: break-word;
}
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height: auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
word-wrap: break-word;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display: none;
visibility: hidden;
}
</style>
<body>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
How this one can achieved in CSS. I googled out but i didn't find any solution.
Try this:
HTML
<nav class="nav">
<ul>
<li>1. Account Info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ul>
</nav>
StyleSheet
.nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
width: 100%;
}
.nav ul li {
float: left;
margin: 0 .2em 0 1em;
}
.nav ul a {
background: red;
padding: .3em 1em;
float: left;
text-decoration: none;
color: #fff;
position: relative;
}
.nav ul li:first-child a:before {
content: normal;
}
.nav ul li:last-child a:after {
content: normal;
}
.nav ul a:before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: red rgba(0, 0, 0, 0);
left: -1em;
margin-left: 1px;
}
.nav ul a:after {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid rgba(0, 0, 0, 0);
border-bottom: 1.5em solid rgba(0, 0, 0, 0);
border-left: 1em solid red;
right: -1em;
margin-right: 1px;
}
Here is the Demo
Try:
HTML:
<div class="arrow">
<p>1. Acount Info</p>
</div>
<div class="arrow2">
<p>2. Verification</p>
</div>
<div class="arrow3">
<p>3. Enjoy</p>
</div>
CSS:
.arrow {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display:inline-block;
}
.arrow:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow2:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
.arrow3 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow3:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
p {
color:white;
text-align: center;
margin-top: 6px;
}
And the DEMO
Here's my attempt: http://codepen.io/anon/pen/xDeCd/
This example works well even if the user changes his font-size or triggers a page zoom. List-items should not break in several lines if the browser is resized.
Screenshot
Markup
<ol>
<li>1. Account info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ol>
(add links if/where necessary, I've just supposed they are not links but simply information labels about the required steps during a process).
Relevant CSS
ol {
white-space: nowrap;
}
li:after, li:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
width: 1em;
height: 100%;
}
li {
display: inline-block;
position: relative;
height: 3em;
padding: 0 1em;
margin-right: 3em;
background: #d12420;
color: #f0f0f0;
font: 1em/3em Arial;
}
li + li { margin-left: -1.8em; }
li:not(:last-child):after {
left: 100%;
content: "";
border-left: 1em solid #d12420;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
li + li:before {
content: "";
right: 100%;
border-left: 1em solid #transparent;
border-top: 1.5em solid #d12420;
border-bottom: 1.5em solid #d12420;
}
li:nth-child(1) { z-index: 3; }
li:nth-child(2) { z-index: 2; }
li:nth-child(3) { z-index: 1; }
Here is some code, it may be useful for youDEMO
<div class="breadcrumb flat">
<a class="active" href="#">1.Account Verification</a>
2.Verification
3.Enjoy
</div>
I am doing a comment page, but right now I am having the issue that the aligment of the bubble speech gets misaligned.
Example
I suppose this ca be fixed with CSS, but not quite sure.
I have my demo here http://jsfiddle.net/bSaJc/
Thanks in advance
This is my css
.bubble-panel {
display: inline-block;
//border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble
{
position: relative;
width: 535px;
height: 130px;
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;
}
.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: 15px;
right: 50px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: left;
margin: 0;
}
See this DEMO
I added vertical-align: middle;
.bubble {
position: relative;
width: 535px;
height: 130px;
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 */
}
Is this what you you want?
http://jsfiddle.net/cfknoop/bSaJc/1/
vertical-align:top;
Add float:left to .bubble-panel
.bubble-panel {
display: inline-block;
float: left;
height: 250px;
position: relative;
margin: 20px;
}
DEMO