How to wrap text around a div button? - html

Question

Can anyone help me with wrapping of the text around the + box ? I can't seem to get it to work. I have a jfiddle that you can refer to. Hope anyone out there can assist me.
Here's the JSFiddle.
And here is the code:
.video-box {
float: left;
width: 31%;
max-width: 240px;
height: 214px;
background: #232323;
margin: 0 1% 2%;
}
.video-box h3 {
display: table-cell;
vertical-align: middle;
margin: 0;
font-size: 1.0em;
line-height: 1.2;
}
.addtoplaylist-videotext:before {
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: -8px;
content: "";
left: 80%;
position: absolute;
display: inline-block;
z-index: 99;
border-top: 10px solid rgba(0, 0, 0, 0.6);
}
a {
color: #FFFFFF;
}
.video-txt {
position: absolute;
bottom: 0;
right: 0;
font-size: 1.1em;
line-height: 16px;
background: #000;
padding: 0 3px;
color: #fff;
}
.addtoplaylist-videotext {
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -50px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height: 15px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: none;
}
.viewplaylist-videotext:before {
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: -8px;
content: "";
left: 80%;
position: absolute;
display: inline-block;
z-index: 99;
border-top: 10px solid rgba(0, 0, 0, 0.6);
}
.viewplaylist-videotext {
background-color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.6);
border-right-color: #ffffff;
border-radius: 5px;
top: -50px;
color: #ffffff;
left: -100px;
padding: 5px 5px;
position: relative;
z-index: 99;
width: 120px;
height: 15px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e78a0', endColorstr='#1e78a0');
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: none;
}
.addtoplaylist-video:hover .addtoplaylist-videotext {
display: block;
}
.viewplaylist-video:hover .viewplaylist-videotext {
display: none;
}
.title {
color: #FFFFFF;
}
.maintainhere-browse {
float: right;
height: 30px;
margin-left: 3px;
margin-top: 20px;
position: relative;
}
.toggle2 {
position: relative;
float: right;
margin-right: 10px;
margin-top: -15px;
background-color: #f36666;
width: 20px;
height: 18px;
color: #FFFFFF;
font-size: 12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
cursor: pointer;
font-weight: bold;
}
.addtoplaylist-video {
position: relative;
bottom: 0px;
right: 0px;
width: auto;
height: auto;
image-rendering: -moz-crisp-edges;
display: inline-block;
cursor: pointer;
}
.viewplaylist-video {
display: none;
}
}
.addtoplaylist-video a {
color: #FFFFFF !important;
}
.viewplaylist-video a {
color: #FFFFFF !important;
}
.play-ico {
background-position: -2px -1351px;
background: url(/blob/1086/1386905708000/a-ico-sprite-png-data.png) no-repeat -2px -1316px;
text-indent: -9999px;
position: absolute;
top: 0;
left: 0;
width: 33px;
height: 33px;
overflow: hidden;
text-align: left;
}
<div class="video-box">
<div class="video-box-content-holder" data-createtime="1385208101000" data-viewcounts="559">
<div class="img" style="max-height:135px">
<a href="/news/video/typhoon-haiyan-politics/897416.html">
<img src="http://i58.tinypic.com/2uj2o3t.jpg" alt="" width="240" height="135" />
<span class="play-ico">play</span>
<span class="video-txt">01:54</span>
</a>
<span class="add-txt">Asia Pacific</span>
</a>
</div>
<div class="txt-box">
<!-- the class toggle 2 is for 2nd component, diff css-->
<div class="maintainhere-browse">
<div id="browsevideos_1" class="toggle2">
<div class="addtoplaylist-video">
<img src="http://i61.tinypic.com/rtdv2b.png" width="12" height="11" alt="add" class="addplaylisticonimg-browse">
<span class="addtoplaylist-videotext"> Add To Playlist!</span>
</div>
<div class="viewplaylist-video">
<img src="http://i59.tinypic.com/2n98as.png" width="17" height="9" alt="viewicon" class="viewplaylisticonimg-browse">
<span class="viewplaylist-videotext"> View Playlist!</span>
</div>
</div>
</div>
<!--endofmaintainhere-->
<div class="title">
<h3 style="color:white;">Typhoon Haiyan: Politics gets in the way of saving lives i want the text to wrap around </h3>
<span class="date" style="color:white;">23 Nov 2013</span>
</div>
<!-- title -->
</div>
</div>
</div>

Answer 1

So the basic problem is assigning display: table to .video-box h3.
Once that is removed, it actually does wrap. The problem is now that you won't see it with that text, because it so happens that those words would move to the next line anyway. I've added more words and removed the height of the container and you can see this working:
DEMO showing text is wrapping without table-cell property.
In your case, I'd consider rewriting some of the code around positioning the .maintainhere-browse button:
.maintainhere-browse{
...
/*margin-top:20px; Remove this line */
...
}
.toggle2 {
...
margin-top: 10px; /* Changed this value */
...
}
Demo