Center block vertically if text inside it too loing - html

Question

I'm backend coder and I'm very new in frontend development, but I have a free time now and I want to try learn basics of HTML / CSS :)
These images describe my question:
I have following. Simple info on the left side and title on the right side.
But if title is long my markup goes bad:
I want to achieve this (Paint):
In other words I want to increase height of the main (gray) block and center its content vertically if title too long.
Here is my code:
<div class="header"> <!-- Main (gray) block -->
<div class="author">
<div class="left">
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" width="50" height="50"/>
</div>
<div class="author_details">
<span class="name">_Dark_</span>
<br>
<span class="time">01.01.2014 — 23:59 </span>
</div>
</div>
<div class="title">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
</div>
</div>
And LESS:
.header {
min-height: 60px;
background-color: #EEE;
padding: 5px;
-moz-box-sizing: border-box;
box-sizing: border-box;
.title {
display: inline-block;
vertical-align: top;
}
h1 {
font-weight: normal;
font-size: 24px;
margin: 0;
}
.author {
max-width: 200px;
display: inline-block;
border-right: 1px solid #CCC;
}
.author_details {
margin: 0 0 0 55px;
padding: 0 5px 0 0;
.name {
font-size: 20px;
font-weight: bold;
}
.time {
font-size: 12px;
}
}
}
Sorry if I explained my problem bad, but I really doesn't know what to do and I want some advice about my (ugly maybe) code :)
Here is JSFiddle with current markup

Answer 1

Your code (HTML) is okay, but can be more simplified, with less elements:
<div class="infoBox">
<p>
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" />
_Dark_<br />
<span>01.01.2014 — 23:59 </span>
</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
</div>
With this CSS (added some comments to explain what some things do).
.infoBox {
min-height: 60px;
background: #eee;
padding: 5px;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table; /* display the box as table */
width: 100%;
}
.infoBox > p, /* selects all p that are direct child of .infoBox */
.infoBox > h1 {
display: table-cell; /* display the p and h1 as a table cell */
}
.infoBox > p {
width: 200px;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: bold;
}
.infoBox > p img {
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
}
.infoBox > p span {
font-size: 12px;
font-weight: normal;
}
.infoBox > h1 { /* select h1 that is a direct child of .infoBox */
font-size: 14px;
margin: 0;
padding: 0;
}
Also check this demo.

Answer 2

Your markup is way too intensive. Look here to make a simpler markup:http://jsfiddle.net/hdqvY/8/
Just keep in mind a few things. If you can group things together, it makes it easier to place items within the page. That small box of information is contained in one area while your text(paragraph) can be contained in another. Getting the boxes to line up is easy: just use display:inline-block; and float:left; to get them to line up. But keep in mind the width of the surrounding container along with the boxes inside so they match up.
HTML
<div class="container">
<div class="box">//Main (gray)block<br>
<img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" width="50" height="50"/><br>
_Dark_<br>
01.01.2014-23:59
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna.
</div>
</div>
CSS
.container{
width:800px;
height:100%;
display:inline-block;
}
.box{
width:140px;
height:300px;
display:inline-block;
float:left;
}
.text{
font-family:arial;
font-size:14px;
display:inline-block;
width:400px;
text-wrap:none;
float:left;
}