I have two different types of div, each should have an arrow attached to the side that points at the image next to it. However, it looks like this:
http://jsfiddle.net/990h3wot/1/
How do I make the arrows move to the side of the divs rather than sit inside them as they are doing now?
Position .home-link-left and .home-link-right relatively and set left and right properties of :before and :after :pseudo-elements.
Fiddle
.home-link-left,
.home-link-right {
vertical-align: middle;
margin: auto;
width: 35vmin;
height: 12vmin;
border: 0.7vmin outset #232323;
background-color: #606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color: white;
position: relative;
}
.home-link-left {
border-radius: 20px 0px 0px 20px;
left: 0px;
border-right: 0px solid transparent;
}
.home-link-right {
border-radius: 0px 20px 20px 0px;
right: 0px;
border-left: 0px solid transparent;
}
.home-link-left:before,
.home-link-right:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
border-bottom: 6vmin solid transparent;
border-top: 6vmin solid transparent;
vertical-align: middle;
display: block;
}
.home-link-container {
width: 45vmin;
height: 13vmin;
margin: auto;
vertical-align: middle;
}
.home-link-left:before {
border-left: 4vmin solid red;
right: -4vmin;
}
.home-link-right:after {
border-right: 4vmin solid red;
left: -4vmin;
}
.home-link-image {
border: 0.7vmin outset #333333;
vertical-align: middle;
margin-top: -10%;
margin: auto;
width: 35vmin;
height: 25vmin;
border-radius: 20px;
}
<table id="home-table">
<tr>
<td>
<div class="home-link-container">
<div class="home-link-left">
</div>
</div>
</td>
<td>
<div class="home-link-image"></div>
</td>
</tr>
<tr>
<td>
<div class="home-link-image"></div>
</td>
<td>
<div class="home-link-container">
<div class="home-link-right">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="home-link-container">
<div class="home-link-left">
</div>
</div>
</td>
<td>
<div class="home-link-image"></div>
</td>
</tr>
<tr>
<td>
<div class="home-link-image"></div>
</td>
<td>
<div class="home-link-container">
<div class="home-link-right">
</div>
</div>
</td>
</tr>
</table>
You must give the arrow parents,.home-link-left .home-link-right, position:relative:
.home-link-left, .home-link-right{
vertical-align:middle;
margin:auto;
width:35vmin;
height:12vmin;
border:0.7vmin outset #232323;
background-color:#606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color:white;
position:relative;/*<- Position:relative;*/
}
And give the pseudo element arrows a position left or right:
.home-link-left:before{
border-left:4vmin solid red;
right:-4vmax;
}
.home-link-right:after{
border-right:4vmin solid red;
left:-4vmax;
}
JSFiddle
Related
The page looks as expected on desktop browsers e.g. Firefox, etc. The problem is with display on mobile devices.
When displayed correctly, the dark background of the "BODY" of the page should appear only as a thin frame, with the white background of the "mainFrame" div appearing as central with all contents inside it.
I have tied to change the width of the "mainFrame" class to 100% but it didn't help.
What changes should be made to the css to allow correct display on not desktop and mobile devices browsers?
Please see the CSS and HTML below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir='ltr'>
<head>
<style>
html, body{height:100%;text-align: center;background:#646464;}
body{padding:0px;margin:0px; text-align: center;}
.mainFrame{
width: auto;
min-height:100%;
height: 100%;
background: white;
border: 5px solid #CCCCCC;
margin:auto;
}
html>body .mainFrame {width:auto; height: auto;}
th{
text-align: center;
padding: 9px 0px 9px 0px;
background: #E8E8FF;
font: bold 12px TAHOMA;
color: #404040;
}
td {
font: 11px Tahoma;
background: #DFEFFF;
padding: 8px 5px 8px 3px;
}
td.blank{
padding: 12px 0px;
background: WHITE;
}
.logosmallContainer {
position: relative;
width: 960px;
top: 22px;
}
.logosmallContainer1 {
position: relative;
width: 720px;
top: 22px;
}
.logosmall {
float:right;
}
.jobtabs{
position: relative;
top:40px;
width: 720px;
}
.upperTabs{
position: relative;
font-size: 12px;
width: 720px;
clear:both;
}
.uprTabs {
width:120px;
text-align:center;
padding:0px;
font: 12px tahoma;
float:right;
}
.uprTabs a {
width:120px;
height: 30px;
line-height:30px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
}
html>body .uprTabs a {width:118px; display:table; }
.uprTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px solid #31557f;
border-left: 1px solid #31557f;
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
}
.lowerTabs{
position: relative;
font-size: 12px;
width: 720px;
border-top: solid #007FC0 5px;
clear:both;
}
html>body .lowrTabs a {width:118px; display:table;}
.lowrTabs {
width:120px;
background-color: #EEEEEE;
text-decoration: none;
text-align:center;
font: 12px tahoma;
float:right;
height: 27px;
line-height:27px;
}
.lowrTabs a {
width:120px;
height: 25px;
line-height:25px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
float:right;
}
.lowrTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px #31557f solid;
border-left: 1px #31557f solid;
border-bottom: 1px #E6E6E6 solid;
border-right: 1px #E6E6E6 solid;
}
.vMsg2 {
font: bold 22px arial;
position: relative;
top: 78px;
width: 720px;
text-align: center;
direction:rtl;
clear:both;
}
.vMain {
position: relative;
top: 113px;
width:620px;
direction:rtl;
clear:both;
}
.vMainJobs {
position: relative;
top: 30px;
width:620px;
direction:rtl;
clear:both;
}
.pgn1 {
width: 330px;
top:30px;
position: relative;
}
html>body .pgn1 {display:table;}
.pgnbx {
width: 30px;
height: 20px;
line-height:20px;
float:right;
text-decoration: none;
text-align:center;
}
html>body .pgnbx a {display:table;}
.pgnbx a{
width: 30px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
background: #FFF;
background: #CDF6ED;
}
.pgnbx a:hover{
width: 30px;
background: #B3E1D7;
border-color: #fff #ccc;
text-decoration: none;
}
.mainXJobs {
height:55px;
clear:both;
}
.ad728Y{
position: relative;
width:728px;
border-top: double thick #D3D3D3;
border-bottom: double thick #D3D3D3;
}
</style>
</head>
<body topmargin='0' leftmargin='0' >
<div class="mainFrame" align="center">
<div class="logosmallContainer1">
<div class="logosmall"><img border="0" src="media/small.jpg" alt="logo"></div>
<DIV class=adtop2>
</div>
</div>
<div class="jobtabs">
<div class="upperTabs">
<DIV class=uprTabs><A href="?Category6">Category 6</DIV>
<DIV class=uprTabs>Category 5</DIV>
<DIV class=uprTabs>Category 4</DIV>
<DIV class=uprTabs>Category 3</DIV>
<DIV class=uprTabs> Category 2</DIV>
<DIV class=uprTabs>Category 1</DIV>
</div>
<div class ="lowerTabs">
<DIV class=lowrTabs>Category 7</DIV>
<DIV class=lowrTabs>Category 8</DIV>
<DIV class=lowrTabs>Category 9</DIV>
<DIV class=lowrTabs>Category 10</DIV>
<DIV class=lowrTabs> Category 11</DIV>
<DIV class=lowrTabs>Category 12</DIV>
</div>
</div>
<div class='vMsg2'><H1>
GENERAL LIST
</H1></div>
<br><br><br><br><br><div class="ad300" id="ad"></div><div class='vMainJobs' dir='ltr'> <table border='0' width='100%' dir='ltr' cellspacing='1'>
<tr>
<th width='100%' colspan='2'>DETAILS</th>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LOCATION </td>
<td height='18'>LONDON</td>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LINK</td>
<td height='18'><a href='https://www.example.com'>https://www.example.com</a></td>
</tr>
</table>
<table border='0'>
<tr>
<td class='blank'>
<a href='#top'>top of page</a>
</td>
</tr>
</table>
</div>
<div class="pgn1">
<div class='pgnbx'>
<a href='?jpage=2'>2</a>
</div>
<div class='pgnbx'>
<a href='?page=3'>3</a>
</div>
<div class='pgnbx'>
<a href='?jpage=4'>4</a>
</div>
<div class='pgnbx'>
<a href='?page=5'>5</a>
</div>
<div class='pgnbx'>
<a href='?jpage=6'>6</a>
</div>
<div class='pgnbx'>
<a href='?page=7'>7</a>
</div>
<div class='pgnbx'>
<a href='?jpage=8'>8</a>
</div>
<div class='pgnbx'>
<a href='?page=9'>9</a>
</div>
<div class='pgnbx'>
<a href='?page=10'>10</a>
</div>
<div class='pgnbx'>
<a href='?jpage=11'>11</a>
</div>
<div class='pgnbx'>
<a href='?page=12'>12</a>
</div>
</div>
<div class="mainXJobs"> </div>
<DIV class="ad728Y"> PUT item "Classicus" here HERE</DIV>
<br><br><br>
</div>
</body>
</font>
</html>
The reason your body does not adjust is because you are assigning width using px. Try to change it to "%" or "vw". You can always assign a max-width or min-width if you want to put a limit on how much you want the width to be.
If you need to have the children adjust to the parent container, assign the width: 100%.
You have to use media query for mobile devices.
For example if I want to add background color for the device of maximum 600px, it will show body background color as
lightblue
after 600px it will be the default.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
As per title, cell width is totally ignored - tried so many things and none work. Tried inspecting to see if there is any inheritance that i do not know about but nothing showed up. The cells just split into equal chunks and cell width property is ignored.
.CalculateBtn {
background-color: #96c11f;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Raleway, Arial;
font-size: 21px;
font-weight: normal;
padding: 10px 10px;
text-decoration: none;
text-align: center;
}
.CalculateBtn:hover {
background-color: #7f0050;
color: #ffffff;
}
.divTable {
display: table;
width: 100%;
table-layout: fixed;
/*vertical-align: top;*/
}
.divTableRow {
display: table-row;
background-color: #0d56c2;
}
.divTableButtonRow {
display: table-row;
}
.divTableHead-left {
background-color: #7F0050;
display: table-cell;
padding: 3px 10px;
width: 30%;
}
.divTableHead-center {
color: #ffffff;
text-align: center;
font-family: raleway, arial, helvetica, sans-serif;
background-color: #7F0050;
display: table-cell;
padding: 3px 10px;
width: 40%;
}
.divTableHead-right {
background-color: #7F0050;
display: table-cell;
padding: 3px 10px;
width: 30%;
}
/* Table Cells */
.divTableCell-left,
.divTableHead {
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
display: table-cell;
padding: 3px 10px;
width: 20%;
}
.divTableCell-center,
.divTableHead {
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
display: table-cell;
padding: 3px 10px;
width: 30%;
color: #ffffff;
}
.divTableCell-right,
.divTableHead {
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
display: table-cell;
padding: 3px 10px;
width: 50%;
color: #ffffff;
}
/* Button Cell properties */
.divTableCellButton-left,
.divTableHead {
display: table-cell;
padding: 3px 10px;
width: 30%;
}
.divTableCellButton-center,
.divTableHead {
display: table-cell;
padding: 3px 10px;
width: 40%;
}
.divTableCellButton-right,
.divTableHead {
display: table-cell;
padding: 3px 10px;
width: 30%;
}
/* End Button Cell properties */
/* INFO cell properties*/
.divTableCellInfo-left {
color: #ffffff;
display: table-cell;
padding: 3px 10px;
max-width: 20%;
}
.divTableCellInfo-right {
color: #ffffff;
display: table-cell;
padding: 3px 10px;
max-width: 80%;
}
/* End info cell properties*/
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable" style="border: 1px solid #ffffff;">
<div class="divTableBody">
<div class="divTableHead-left"> </div>
<div class="divTableHead-center">
<font size="4">Staffing Calculator K=2</font>
</div>
<div class="divTableHead-right"> </div>
<div class="divTableRow">
<div class="divTableCell-left">
<font color="#ffffff">Calls:</font>
</div>
<div class="divTableCell-center"><input type="text" name="calls" id="calls" style="width: 80px;" value="151"></div>
<div class="divTableCell-right">
<font color="#ffffff">in a period of</font>
<input name="period" value="5" />
<select name="callUnit">
<option value="hour" selected>hours</option>
<option value="minute" >minutes</option>
</select>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell-left">
<font color="#ffffff">Average Handle Time: </font>
</div>
<div class="divTableCell-center"><input type="text" name="aht" value="300"></div>
<div class="divTableCell-right">
<select name="ahtUnit">
<option value="minute" >minutes</option>
<option value="second" selected>seconds</option>
</select> <i>include time spent on phone and time working after call. Usually between 3 and 5 minutes.</i>
</div>
</div>
</div>
I use colgroup for this. I see you are using div's in your markup and table related CSS to style your table, so my suggestion would require that you change your markup to table markup (not sure if doable).
table {
width: 100%;
table-layout: fixed;
}
th {
background: #0095ff;
color: white;
}
td {
border: 1px solid #ccc;
}
<table>
<colgroup>
<col style="width:30%" />
<col style="width:40%" />
<col style="width:30%" />
</colgroup>
<thead>
<tr>
<th colspan="3">This is the table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
I have been try to make an html and css lines to display user image, name, old file name, new file name and date.
My problem is when the whole content has the same length it will look good but if the username is longer or another other sting is longer it will deform the table and design please i need help.
Below is a sample image and jsfiddle link
Here is bad side
Here is my html code
<table>
<tr class="treeFile">
<td>
<img src="Pictures/b78d7cd4555821042a70d9ec034b0dea.PNG" alt="Front" class="treeimage"/>
<span class="treposition" align="center">
<span class="treeSenderline"><span class="treeName">Ujah peter</span></span>
<span class="treeSenderXXX"></span>
</span>
</td>
<td width="1px"></td>
<td align="center">
<div class="treeMain">
<span class="fromtree"><strong>Mainprojectarea</strong></span>
<span><strong>Newprojectarea</strong></span>
<span class="treeBottomLine">10-28-2016</span>
</div>
</td>
</tr>
<tr class="treeFile">
<td>
<img src="Pictures/b78d7cd4555821042a70d9ec034b0dea.PNG" alt="Front" class="treeimage"/>
<span class="treposition" align="center">
<span class="treeSenderline"><span class="treeName">micheal grayer</span></span>
<span class="treeSenderXXX"></span>
</span>
</td>
<td width="1px"></td>
<td align="center">
<div class="treeMain">
<span class="fromtree"><strong>Mainprojectareaxxx</strong></span>
<span><strong>Newprojectlocation</strong></span>
<span class="treeBottomLine">10-28-2016</span>
</div>
</td>
</tr>
</table>
Here is css code
.treeBottomLine{
border-bottom: 2px solid #337ab7;
display: block;
margin-top: 0px;
width: 60%;
height: 20px;
text-align: center;
align-content: center;
border-left: 2px solid #337ab7;
border-right: 2px solid #337ab7;
background-color: #fff;
}
.fromtree{
display: inline-block;
border-bottom: 2px solid #337ab7;
border-left: 2px solid #337ab7;
border-right: 2px solid #337ab7;
padding: 3px;
margin-right: 3em;
background-color: #fff;
}
.treeimage{
border-radius: 50%;
border: 2px solid #337ab7;
background-color: #fff;
margin: 5px;
margin-right: 1em;
width:30px;
height:30px;
}
.treeName{
border: 2px solid #337ab7;
background-color: #fff;
padding: 3px;
margin-left: 2em;
margin-right: auto;
text-align: center;
display: inline-block;
}
.treeSender{
border-top: 2px solid #337ab7;
width: 100%;
display: inline-block;
position: relative;
top: -2.6em;
left: 33px;
z-index: 0;
}
.treeSenderline{
display: inline-block;
position: relative;
left: 2.6em;
top: -2em;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #337ab7;
width: 100%;
height: 3px;
}
.treeMain{
position: relative;
}
Here is a link to https://jsfiddle.net/evr50w05/
I believe what you're looking for is to float the blue line to the left, and add a margin:
.treeMain {
float: left;
margin-left: 33px;
}
I've created a fiddle showcasing this here.
Hope this helps!
Found it, sorry, changed padding and forgot to change it for textarea.
My mistake. Will delete )
I'm trying to make table with text input and textarea input on the same row, but cannot make textarea the same height as the text input.
Could anyone please tell me, why text input and textarea have different height and how to fix that? As you can see, textarea is 2px higher and chrome inspector tells me the same. What's wrong and how to fix that?
(sorry for a large text, site told me that I've got "mostly code" and have to add some details. Have no idea, what else may I add to that code, the problem is obvious)))
Thank you!
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table
the textarea has padding top-bottom 2px,
the input only 1px.
change the padding on textarea:
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding: 1px 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table
box-sizing: border-box; is what you need to place onto the input and text area. Also works well for select.
By using box-sizing: border-box; it means you dont have to adjust all of your widths, padding and line-height and you can have everything the same
div
{
background: #ddd;
}
input#te
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
box-sizing: border-box;
}
textarea#ta
{
position: relative;
outline:0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
box-sizing: border-box;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table
To fix the problem, add box-sizing: border-box to the input element AND to the textarea element (for the fix to work in Chrome).
div {
background: #ddd;
}
input#te {
position: relative;
outline: 0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
line-height: 5em;
vertical-align: middle;
box-sizing: border-box;
}
textarea#ta {
position: relative;
outline: 0;
border: 1px solid #a78;
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
background: transparent;
height: 5em;
vertical-align: middle;
resize: none;
box-sizing: border-box;
}
<table>
<tr>
<td>
<div>
<input type=text id="te" value="input is 2px smaller in chrome">
</div>
</td>
<td>
<div>
<textarea id="ta">textarea is 2px higher in chrome</textarea>
</div>
</td>
</tr>
</table>
I am creating a table madde with several divs, and I am having an extra space between the first row (styled as head) and the rest of them, only the fist two columns (divs). Here you can see very clear:
There is no style atribute causing this space, at least I am not able to find the reason of it.
I have reproduced it on jsfiddle and you can see that it also sets the extra space: DEMO
Here I bring HTML & Syle related code:
HTML:
<div class="tableWrap">
<div class="tableHeader">
<div class="contentColumn60">
<span class="tableHeaderText">Turno</span>
</div>
<div class="contentColumn20">
<span class="tableHeaderText">Tipo</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Editar</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Reactivar</span>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
STYLE:
.tableWrap{
width: 100%;
height:380px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
margin: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-size:12px;
color:#666;}
.tableHeader{
height: 40px;
width: 100%;
background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #FAFAFA;
display: inline-block;
font-weight: 600;
}
.tableHeaderText{
line-height: 40px;
padding: 0 10px;
}
.tableContent{
height: 40px;
width: 100%;
}
.tableContentText{
line-height: 40px;
padding: 0 0 0 20px;
}
.contentColumn60{
height: 40px;
width: 58%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn20{
height: 40px;
width: 20%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn10{
height: 40px;
width: 10%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.discontinueIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/error.png);
background-repeat:no-repeat;
margin: 0 auto;
}
.editIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/edit.png);
background-repeat:no-repeat;
margin: 0 auto;
}
Since the elements are inline-block, you could use vertical-align:top to align them as desired. It's worth noting that the default property value is baseline; this explains why they were behaving as they were. UPDATED EXAMPLE HERE
.contentColumn60 {
height: 40px;
width: 58%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
.contentColumn20 {
height: 40px;
width: 20%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
use overflow:hidden; for content column60,20,10 it works perfect
add a clearfix or use vertical-align:top and overflow:hidden
.contentColumn60:after {
content: "";
display: table;
clear: both;
}