Programmer 400 Programmer 400 - 4 months ago 16
CSS Question

How to align my content

I almost succeeded making aligned html and css but between writing "today" and "yesterday" the content is not aligned. I want it to look like a table. Now it writes "Today" and just packs the content so that the next row doesn't look adjusted.

enter image description here



.ui.left.floated {
min-width: 80px;
}

<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>



<body>


<div id="wrapper"> <div class="ui top attached tabular menu">
<a class="item active" data-tab="first">All</a>
<a class="item" data-tab="second">Company</a>
<a class="item" data-tab="third">Private</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<div class="ui divided items">





<div style="margin-top:10px!important" class="item">


<div class="ui left floated">
Today
<br>3:28


</div>

<div class="image">




<a href="/vi/5773759738806272.html">

<img src="http://lh3.googleusercontent.com/rVL0kUVl6aHzOiyiz5fWq0YZcwALQdrqn2Vf0DWW0R5OvClZgYj5S4_VoQUajZC54gxlQxgP6NZUr3f9pALqzw3EyQ=s150" title="Get Opencart Development Services from TRS Software Solutions" alt="Get Opencart Development Services from TRS Software Solutions">

</a>




</div>
<div class="content">
<a class="header" href="/vi/5773759738806272.html">
Get Opencart Development Services from TRS Software Solutions </a>

<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>TRS Software Solutions is leading ...</p>
</div>
<div class="extra">
<div class="ui label">






























Services

</div>
<div class="ui label">

For sale


</div>
<div class="ui label">Lakeland</div>
<div class="ui label">Florida</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>


</div>








<div class="item">


<div class="ui left floated">
Yesterday
<br>3:44


</div>

<div class="image">




<a href="/vi/5329266862456832.html">

<img src="http://lh3.googleusercontent.com/QQ0YVYpyC5LGhKzpXGlkh-hzQuoYnkDTk4IHtyRKoREVStKOUBrsSH7IdtIZr1F-bXJb38gPRCRtNZuDDROpIOSbO6w=s150" title="Learn jQuery and JavaScript by creating an apple style thumb Slider" alt="Learn jQuery and JavaScript by creating an apple style thumb Slider">

</a>




</div>
<div class="content">
<a class="header" href="/vi/5329266862456832.html">
Learn jQuery and JavaScript by creating an apple style thumb Slider </a>

<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Originally started as a programming ...</p>
</div>
<div class="extra">
<div class="ui label">






























Services

</div>
<div class="ui label">

For sale


</div>
<div class="ui label">Other city</div>
<div class="ui label">Massachusetts</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>


</div>








<div class="item">


<div class="ui left floated">
12 July.
<br>0:42


</div>





I tried making a row with cells with semantic-ui but that made things worse. Can you help me?

I want it to look like this (mockup)

enter image description here

Will it work if I make rows and cells?

Answer
.ui.left.floated {
    min-width: 80px;
}

I am sorry is this what you are after? this will make sure that all the images are aligned? make it 100px as if the date is say.. 31 September (longer wording)

Below is the grid system I use for these sorts of things.

/*________ GRID ________*/

.grid {
    margin: 0 auto;
    overflow: hidden;
    margin-left: -30px;
}
.grid > div {
    float: left;
    min-height: 1px;
    padding-left: 30px;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

.grid .third {
    width: 33.33%;
}
.grid .halve {
    width: 50%;
}

and so on. then when you get down to smaller sizes eg mobiles.

@media (max-width: 740px) {
    .grid .third {
        width: 100%;
    }
}