CODEWITHSUNDEEP
htmlcss
carloss medranoo
carloss medranoo

Reputation: 1489

Align Content inside a Div

WHAT I HAVE

I have this Table.

enter image description here

With this HTML

<div class="list-item">
<p>
 <input type="checkbox">
 <span class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></span> 
 <span class="list-title">{{this.title}}</span> 
 <span class="list-owner">{{this.owner}}</span>
 <span class="list-date">16 Dec 2014</span>
</p>
 </div><br>

With this CSS

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}

.list-type{
  margin-left: 10px;
  margin-right: 10px;
}

WHATH I WANTO TO ACCOMPLISH

But i want to create something like a table inside the <div>.

NOTE I KNOW that a <table> fits perfect, but for how this content is beign created i need to simulate a table with this <div>, so table unforntannly its not an option here.

I need to replicate something like this (check image).

enter image description here

NOTE ignore the Star icon

WHAT I ALREADY TRY

Settin margin-left to each of the <span> but the order of the "admin" and "date" are not equals, if i use margins i get this (check image).

enter image description here

Im getting this with this CSS

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}

.list-type{
 margin-left: 10px;
}

.list-title{
   margin-left: 10px;
}

.list-owner{
  margin-left: 100px;
}

.list-date{
  margin-left: 190px;
}

Upvotes: 3

Views: 72

Answers (4)

Gerasimos Pap
Gerasimos Pap

Reputation: 459

I have changed some Tags and some CSS, I like the use of percentage width and divs. If this does not help you maybe it can give you more ideas.

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}
.cb{
    float: left;
    width:3%;
}
.list-type{
    float: left;
    width:8%;
}


.list-title{
    float:left;
    width:35%;
}

.list-owner{
    float:left;
    width:15%;
}

.list-date{
    float: left;
    width: 20%;
}
<div class="list-item">
<p>
 <input type="checkbox" class="cb">
 <div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div> 
 <div class="list-title">Title</div> 
 <div class="list-owner">Owner</div>
 <div class="list-date">16 Dec 2014</div>
</p>
 </div><br>
<div class="list-item">
<p>
 <input type="checkbox" class="cb">
 <div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div> 
 <div class="list-title">Title22</div> 
 <div class="list-owner">Owner22</div>
 <div class="list-date">16 Dec 201422</div>
</p>
 </div><br>
<div class="list-item">
<p>
 <input type="checkbox" class="cb">
 <div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div> 
 <div class="list-title">Title 333</div> 
 <div class="list-owner">Owner 333</div>
 <div class="list-date">16 Dec 2014333</div>
</p>
 </div>

Did this help???

Upvotes: 2

Sharad Soni
Sharad Soni

Reputation: 378

Try with the below css:

.list-title{ margin-left: 10px; width: 200px;}
.list-owner{ margin-left: 10px; width: 40px;}
.list-date{ margin-left: 10px; width: 40px;}

Note: Change the width size according to your need.

Upvotes: 1

Pablo Rincon
Pablo Rincon

Reputation: 1039

Tabular data: use tables.

Or as @oriol suggested, use CSS tables.

Upvotes: -2

Oriol
Oriol

Reputation: 287990

Try CSS tables:

.list-item {
  display: table;
}
.list-item > p {
  display: table-row;
}
.list-item > p > * {
  display: table-cell;
}

Upvotes: 3

Related Questions