This question already has answers here:
inline-block list items mess up when one is empty
(4 answers)
Closed 6 years ago.
My goal is to create a container, and inside there are 6 tilecards each with different content on them. When I try to implement text into one of the divs, the divs under them all shift downwards.
Here's what it looks like when text is added.
I've looked for probably an hour and I haven't found a solution.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="header">
<p class="textheader"><b>websitetitle |</b></p>
</div>
<div id="navbar">
<div class="navitem">
<p class="navtext"><b>Home</b></p>
</div>
<div class="navitem">
<p class="navtext">Info</p>
</div>
</div>
<div id="boxinfowrapper">
<div id="preboxtextdiv">
<h1 id="preboxtext">title for box cards:</h1>
</div>
<div id="boxcontainer">
<div class="tilecard">
<p class="boxtext">Hello</p>
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
</div>
</div>
</body>
</html>
CSS:
#header {
background-color: #00ccff;
width: 100%;
height: 40px;
display: inline-block;
margin: 0px;
margin-top: -10px;
box-shadow: 0px 0px 0px 2px #50ADCC
}
body{
margin: 0px;
}
.textheader {
font-family: Verdana;
color: #FFFFFF;
margin-left: 10px;
position: relative;
}
#navbar{
width: 50%;
height: 40px;
background-color: white;
position: relative;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
text-align: center;
margin: 3px auto;
}
.navitem {
width: 80px;
height: 40px;
margin: 0 auto;
display: inline-block;
text-align: center;
}
.navitem:hover .navtext{
color: #4dd2ff;
}
.navtext {
color: black;
margin-top: 10px;
padding: 0px;
font-family: Courier;
font-size: 20px;
}
.tilecard {
margin-top: 30px;
width: 200px;
height: 200px;
background-color: lightgray;
display: inline-block;
position: relative;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-right: 10px;
margin-left: 10px
}
.tilecard:hover {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
background-color: gray;
}
#boxcontainer {
position: relative;
width: 720px;
height: 495px;
background-color: white;
text-align: center;
margin: 0px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
#preboxtextdiv {
width: 600px;
height: 30px;
position: relative;
margin: 30px auto;
text-align: center;
}
#preboxtext {
color: #80bfff;
font-family: Helvetica;
}
#boxinfowrapper {
position: relative;
width: 100%;
height: 1000px;
background-color: #f0f5f5;
margin: 100px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
}
.boxtext {
position: relative;
vertical-align: top;
}
the reason lies in display: inline-block; for those containers - this will vertically align those elements along their baselines (= text base lines). To avoid that, add
.tilecard {
vertical-align: top;
}
here's the fiddle: https://jsfiddle.net/z0731w5x/
The default vertical-align is baseline. Without text, the baseline of an inline-block element corresponds to the bottom of its bounding rectangle, not the text that it would normally contain.
Align your tilecards by their tops and all will be well.
.tilecard {
vertical-align: top;
}
#boxcontainer {
position: relative;
width: 720px;
height: 495px;
->height: auto;
background-color: white;
text-align: center;
margin: 0px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
Try this
Related
I'm a beginner in programming, and I'm trying to create a card with a hover effect. When hovering over the card, I would like to add an opacity to the card and show 4 buttons, one above the other. Can you help me?
Below is my code.
.cardnew {
height : 256px;
text-align : center;
width : 246px;
background : #ffffff;
margin : 20px;
display : inline-block;
box-shadow : 1px 1px 22px rgba(157, 184, 209, 0.19);
border-radius : 1px;
cursor : pointer;
transition : 0.15s linear;
}
.cardnew > img {
height : 150px;
width : 100%;
border-radius : 10px 10px 0 0;
padding : 35px 0 5px 0;
}
.cardnew > h1 {
font-size : 22px;
color : #5c5c5c;
padding : 15px 0 5px 0;
font-weight : 100;
}
.cardnew > p {
font-size : 13px;
color : #cdcdcd;
padding : 0 40px;
line-height : 20px;
}
.cardnew > a {
padding : 13px;
font-weight : normal;
width : 260px;
color : #2687f1;
border : 2px solid #2687f1;
border-radius : 7px;
margin : auto;
margin-top : 35px;
display : block;
transition : 0.2s linear;
}
.cardnew:hover {
transform : scale(1.015);
transition : 0.15s linear;
box-shadow : 1px 1px 22px rgba(157, 184, 209, 0.5);
}
.cardnew:hover > a {
padding : 13px;
width : 260px;
color : #fff;
background : #2687f1;
border-radius : 7px;
margin : auto;
margin-top : 35px;
transition : 0.2s linear;
}
.row-card {
justify-content : space-around;
flex-wrap : wrap;
margin-right : -12.5px;
margin-left : -12.5px;
}
<div class="row-card">
<div class="cardnew">
<img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
<h1>
name
</h1>
<p>firstname</p>
<div class="button"> BUTTON
<div class="button"> BUTTON
<div class="button"> BUTTON
<div class="button"> BUTTON
</div>
</div>
I tried some tutorials that I found on MDN and youtube but I couldn't implement it. Any help will be of great help.
can you help me?
like this pen: https://codepen.io/philcheng/pen/YWyYwG
The reason the styling for the buttons wasn't applied is because of all the >s you had. If you remove them, it seems to work a lot better. Also, you have a lot of divs that aren't closed at the bottom. Is there a reason for that?
For the disappearing, you can use the opacity property to make them disappear and reappear on hover.
.cardnew {
height: 256px;
text-align: center;
width: 246px;
background: #ffffff;
margin: 20px;
display: inline-block;
box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19);
border-radius: 1px;
cursor: pointer;
transition: 0.15s linear;
}
.cardnew img {
height: 150px;
width: 100%;
border-radius: 10px 10px 0 0;
padding: 35px 0 5px 0;
}
.cardnew h1 {
font-size: 22px;
color: #5c5c5c;
padding: 15px 0 5px 0;
font-weight: 100;
}
.cardnew p {
font-size: 13px;
color: #cdcdcd;
padding: 0 40px;
line-height: 20px;
}
.cardnew a {
padding: 13px;
font-weight: normal;
width: 260px;
color: #2687f1;
border: 2px solid #2687f1;
border-radius: 7px;
margin: auto;
margin-top: 35px;
display: block;
opacity: 0;
transition: 0.2s linear;
}
.cardnew:hover {
transform: scale(1.015);
transition: 0.15s linear;
box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.5);
}
.cardnew:hover a {
padding: 13px;
width: 260px;
color: #fff;
background: #2687f1;
border-radius: 7px;
margin: auto;
margin-top: 35px;
opacity: 1;
transition: 0.2s linear;
}
.row-card {
justify-content: space-around;
flex-wrap: wrap;
margin-right: -12.5px;
margin-left: -12.5px;
}
<div class="row-card">
<div class="cardnew">
<img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
<h1>
name
</h1>
<p>firstname</p>
<div class="button"> BUTTON
<div class="button"> BUTTON
<div class="button"> BUTTON
<div class="button"> BUTTON
</div>
</div>
EDIT:
I have messed around with your code, and I think I have created something like your picture.
(You might need to mess around with the values to get them perfect.)
.overlay {
background: rgba(0, 0, 0, 0.5);
height: 256px;
width: 246px;
position: absolute;
opacity: 0;
transition: 0.2s linear;
}
.cardnew a {
position: absolute;
padding: 13px;
font-weight: normal;
width: 160px;
color: #2687f1;
border: 2px solid #2687f1;
border-radius: 7px;
margin: auto;
margin-top: 35px;
display: block;
opacity: 0;
transition: 0.2s linear;
}
.cardnew:hover a {
transform: scale(1);
padding: 13px;
color: #fff;
background: #2687f1;
border-radius: 7px;
margin: auto;
margin-top: 35px;
opacity: 1;
transition: 0.2s linear;
}
.btn1 {
top: 10px;
left: 42.5px;
}
.btn2 {
top: 65px;
left: 42.5px;
}
.btn3 {
top: 120px;
left: 42.5px;
}
.btn4 {
top: 175px;
left: 42.5px;
}
.cardnew {
height: 256px;
text-align: center;
width: 246px;
background: #ffffff;
margin: 20px;
display: inline-block;
box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19);
border-radius: 1px;
cursor: pointer;
transition: 0.15s linear;
}
.cardnew img {
height: 150px;
width: 100%;
border-radius: 10px 10px 0 0;
padding: 35px 0 5px 0;
}
.cardnew h1 {
font-size: 22px;
color: #5c5c5c;
padding: 15px 0 5px 0;
font-weight: 100;
}
.cardnew p {
font-size: 13px;
color: #cdcdcd;
padding: 0 40px;
line-height: 20px;
}
..cardnew:hover {
transform: scale(1.015);
transition: 0.15s linear;
box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.5);
}
.cardnew:hover .overlay {
opacity: 1;
}
.row-card {
justify-content: space-around;
flex-wrap: wrap;
margin-right: -12.5px;
margin-left: -12.5px;
}
<div class="row-card">
<div class="cardnew">
<div class='overlay'>
</div>
<img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
<h1>
name
</h1>
<p>firstname</p>
<div class="button"> BUTTON </div>
<div class="button"> BUTTON </div>
<div class="button"> BUTTON </div>
<div class="button"> BUTTON </div>
</div>
</div>
Here is the codepen: click here
Is it possible to have an image gallery with thumbnails and big preview with zoom? Something like cloudzoom but without any JS, jQuery, Scripts etc as all form of 'scripts and actions' are forbidden and will not work.
We can only use HTML5 and CSS3 no scripts
thanks
Look on this. Hope it helps you.
#images-box {
/* The total width of the image-box, mainly for centering */
width: 850px;
margin: 0px auto;
position: relative;
top: 70px;
}
.image-lightbox img {
/* Inherit the width and height from the parent element */
width: inherit;
height: inherit;
}
.holder {
/* The width and height, you can change these */
width: 250px;
height: 166px;
/* Float left, so everything aligns right */
float: left;
margin: 0 20px 0 0;
}
.image-lightbox {
/* Inherit width and height from the .holder */
width: inherit;
height: inherit;
padding: 10px;
/* Box shadow */
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
background: #fff;
border-radius: 5px;
/* Position absolutely so we can zoom it out later */
position: absolute;
top: 0;
font-family: Arial, sans-serif;
/* Transitions to provide some eye candy */
-webkit-transition: all ease-in 0.5s;
-moz-transition: all ease-in 0.5s;
-ms-transition: all ease-in 0.5s;
-o-transition: all ease-in 0.5s;
}
.image-lightbox span {
display: none;
}
.image-lightbox .expand {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.image-lightbox .close {
position: absolute;
width: 20px; height: 20px;
right: 20px; top: 20px;
}
.image-lightbox .close a {
height: auto; width: auto;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #22272c;
box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
border-radius: 5px;
font-weight: bold;
float: right;
}
.close a:hover {
box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}
div[id^=image]:target {
width: 450px;
height: 300px;
z-index: 5000;
top: 50px;
left: 200px;
}
div[id^=image]:target .close {
display: block;
}
div[id^=image]:target .expand {
display: none;
}
div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }
<div id="images-box">
<div class="holder">
<div id="image-1" class="image-lightbox">
<span class="close">X</span>
<img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" alt="earth!">
<a class="expand" href="#image-1"></a>
</div>
</div>
<div class="holder">
<div id="image-2" class="image-lightbox">
<span class="close">X</span>
<img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" alt="earth!">
<a class="expand" href="#image-2"></a>
</div>
</div>
<div class="holder">
<div id="image-3" class="image-lightbox">
<span class="close">X</span>
<img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" alt="earth!">
<a class="expand" href="#image-3"></a>
</div>
</div>
</div>
You can use css hover to implement image zoom. And using hover property you can create a Image zoom gallery pretty much like you want.
Here is a sample for it.
https://codepen.io/Remedy/pen/ZYJrpp
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/58/Pepsi_logo.svg/1280px-Pepsi_logo.svg.png" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
You can also have a look at these links below for complete implementation.
https://codepen.io/elad2412/pen/yfEGp
https://codepen.io/samuelmaggs/pen/ZWpjPN
It is not possible to zoom a image without javascript or JQuery, we need to use a Javascript or JQuery functiononmouseover
I am trying to create a DP box for the user which is containing a user profile picture in it, where on image hover an edit profile image link will appear, but it is not working. When I hover over on the image it is blinking and the link doesn't appear correctly.
Here is the codepan link click here
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp img:hover ~ .edit-dp a {
display: block;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
The blinking glitch is because of that :hover effect of display: block on image instead of container div.
Since every time you :hover on the image you ultimately gonna edit it, so instead of display: none you can set it to opacity: 0 and on :hover you can set it to opacity: 1 and by doing this you'll get a nice transition effect too.
Here's the Snippet for a better view:
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
color: #fff;
font-size: 15px;
text-decoration: none;
opacity: 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.dp:hover .edit-dp a {
opacity: 1;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
Solution 1:
Use following css will make your effect nice.
.dp:hover > .edit-dp a{
display: block;
}
Make hover effect on div instead of image
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp:hover > .edit-dp a{
display: block;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
Working Codepen
Solution 2:
And Another solution is use pointer-events:none; on hover.
.dp img:hover ~ .edit-dp a{
display: block;
pointer-events:none;
}
Working Codepen
I have some image thumbnails and, on hover, I want the title to be displayed on top of a transparent black <div> overlay which covers the width and height of the thumbnail.
I'm using display: table and display: table-cell; respectively (to allow for vertical middle positioning).
However, every time I try this, the overlay <div> is acting as a small strip rather than covering the whole <div>.
I've tried adding padding and margins but am still unable to get my desired behaviour.
http://jsfiddle.net/jameshenry/t92qukz8/2/
The CSS:
.griditem {
position: relative;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
width: 50%;
overflow: hidden;
}
.titles {
position: absolute;
display: table;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
z-index: 999;
}
.titles p {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
.griditem:hover .titles {
text-decoration: none;
opacity:1;
}
h5 {
font-family: Helvetica Neue;
font-size: 5em;
color: #FFFFFF;
padding-bottom:0;
margin-bottom:-30px;
}
h6 {
padding-top: 0;
}
}
and the HTML
<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" />
<a href="http://www.google.com" class="titles">
<p>BIG TEXT<br>
small Title<p>
</a>
</div>
How can I alter my css/html to get my desired behaviour?
In order to have the table take up 100% height, it needs to have a height context to reference (since no parent is set to any 'height', it collapses). Your problem can be solved by adding a wrapper to your table that sets that context, and adding height:100%; to your display:table; element.
.griditem {
position: relative;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
width: 50%;
overflow: hidden;
}
/*added overlay CSS*/
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
.titles {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
z-index: 999;
}
.titles p {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
.griditem:hover .titles {
text-decoration: none;
opacity:1;
}
h5 {
font-family: Helvetica Neue;
font-size: 5em;
color: #FFFFFF;
padding-bottom:0;
margin-bottom:-30px;
}
h6 {
padding-top: 0;
}
<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" />
<div class="overlay">
<a href="http://www.google.com" class="titles">
<p>BIG TEXT<br>
small Title<p>
</a>
</div>
</div>
You could easily solve this by using a bit of jquery like so. Demo can be found here.
var pheight = $(".griditem").height();
$(".titles p").css("height", pheight);
$(window).resize(function () {
var pheight = $(".griditem").height();
$(".titles p").css("height", pheight);
});
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>
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