Creating divs displaying inside each other and inline using CSS - html

Question

I have started on this fiddle using CSS:
.cont {
border:1px solid #F36F25;
}
.ticketnumber {
display:inline-block;
}
.status {
display:inline-block;
}
.summary {
display:inline-block;
float:left;
}
.last_updated {
display:inline-block;
float:right;
}
.box {
}
http://jsfiddle.net/3qbn222u/
i want to create something that looks like this image:
how can i achieve this in the easiest way?

Answer 1

//HTML BLOCK
<div class="cont">
<div class="header_box">
<div class="ticket_box">
<div class="ticketnumber">ID#0000001234</div>
<div class="summary">Subject: Grumpy Cat</div>
<div class="summary">Summary: blaahh</div>
</div>
<div class="summary_box">
<div class="last_updated">10 minutes ago</div>
<div class="status"></div>
</div>
</div>
<div class="wrapper_box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
//CSS BLOCK
.cont {
display: flex;
display: -webkit-flex;
height: 200px;
border-radius: 5px;
flex-direction: column;
-webkit-flex-direction: column;
border: 1px solid #dddddd;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.header_box{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
font-size: 12px;
}
.wrapper_box{
display: flex;
display: -webkit-flex;
flex: 2;
-webkit-flex: 2;
}
.ticket_box{
display: flex;
display: -webkit-flex;
flex: 6;
-webkit-flex: 6;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: flex-start;
-webkit-align-items: flex-start;
margin: 10px 10px;
}
.summary_box{
display: flex;
display: -webkit-flex;
flex: 4;
-webkit-flex: 4;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: flex-end;
-webkit-align-items: flex-end;
margin: 10px 10px;
}
.ticketnumber {
display: flex;
display: -webkit-flex;
}
.summary {
display: flex;
display: -webkit-flex;
}
.last_updated {
display: flex;
display: -webkit-flex;
}
.status {
display: flex;
display: -webkit-flex;
height: 15px;
width: 15px;
margin: 10px 0px;
border-radius: 50%;
background: red;
}
.box {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 10px solid #f3f3f3;
margin: 5px 5px;
background: #ccc;
background: url(http://www.freeallimages.com/wp-content/uploads/2014/09/grumpy-cat-no-1.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-position: center;
-webkit-background-position: center;
color: #fff;
}

Answer 2

Agreed using FlexBox would be the easiest way.
Here is a good reference guide to FlexBox:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes