Hey there, I've got this HTML and CSS structure that I'm working on. My goal is to have all four divs in one line. Can someone please take a look and let me know what I might be doing wrong?
Here's an example: https://jsfiddle.net/0ynnfmo5/
<body>
<div class="listItem">
<div id="detailsName" class="detailsName">
</div>
<div class="detailsDate">
</div>
<div class="status">
</div>
<div class="button">
</div>
</div>
</body>` .listItem{ position:absolute; display: table; padding:3px; width:70%; height:60px; background-color: #28b4ea; color:#ffffff; border-style: none; min-height:60px; }
.listItem .detailsName{
position: relative;
display: table-cell;
left:0px;
height:56px;
min-height: 56px;
width:100%;
background-color: #000;
}
.listItem .detailsDate{
position: relative;
float:left;
display: table-cell;
height:56px;
width:150px;
background-color: #fff;
}
.listItem .status{
position: relative;
float:left;
display: table-cell;
height:56px;
width:150px;
background-color: #ddd;
}
.listItem .button{
position: relative;
float:left;
display: table-cell;
height:56px;
width:150px;
background-color: #aaa;
}`