CODEWITHSUNDEEP
htmlcss
AurelianG
AurelianG

Reputation: 99

Html Layout problems...

Ok so i have this Html + Css structure... all I want is to have the four div's in one line.

can anybody take a look and tell me what i'm doing wrong?

Example here: 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;
}`

Upvotes: 0

Views: 29

Answers (1)

Paulie_D
Paulie_D

Reputation: 115295

You don't use display:table-cell and float

.listItem {
  position: absolute;
  display: table;
  table-layout: fixed;
  padding: 3px;
  width: 70%;
  height: 60px;
  background-color: #28b4ea;
  color: #ffffff;
  border-style: none;
  min-height: 60px;
}
.listItem .detailsName {
  position: relative;
  display: table-cell;
  height: 56px;
  min-height: 56px;
  background-color: #000;
}
.listItem .detailsDate {
  position: relative;
  display: table-cell;
  height: 56px;
  width: 150px;
  background-color: #fff;
}
.listItem .status {
  position: relative;
  display: table-cell;
  height: 56px;
  width: 150px;
  background-color: #ddd;
}
.listItem .button {
  position: relative;
  display: table-cell;
  height: 56px;
  width: 150px;
  background-color: #aaa;
}
<div class="listItem">
  <div id="detailsName" class="detailsName"></div>
  <div class="detailsDate"></div>
  <div class="status"></div>
  <div class="button"></div>
</div>

Note: Obviously at some point the wrapping div won't be wide enough for all the divs (such as in the mini-view below) so you'd need media queries to adjust as required..

Upvotes: 1

Related Questions