Aligning elements inside display:cell - html

Question

I have the following code:
Also found here as a jsfiddle.
.font_color_white {
color: white;
}
.font_20px {
font-size: 20px;
}
.font_weight_bold {
font-weight: bold;
}
.bg_color_orange {
background-color: rgb(255, 97, 56);
}
.section_container {
display: block;
position: relative;
width: 100%;
height: auto;
min-width: 960px;
margin-top: 20px;
}
.section_container_inner {
margin: 0 auto;
display: block;
position: relative;
}
.section_block {
display: block;
float: left;
position: relative;
height: auto;
}
.section_block_header {
display: block;
position: relative;
text-align: center;
margin-bottom: 5px;
}
.section_block_table {
display: table;
position: relative;
}
.section_block_row {
display: table-row;
position: relative;
}
.section_block_cell {
display: table-cell;
position: relative;
}
.width_960px {
width: 960px;
}
.height_50px {
height: 50px;
line-height: 50px;
vertical-align: middle;
}
.margin_top_10px {
margin-top: 10px;
}
.padding_left_5px {
padding-left: 5px;
}
.padding_top_minus_5px {
padding-top: -5px;
}
.display_block {
display: block;
}
.box_orange {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid rgb(255, 97, 56);
width: 20px;
height: 20px;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<div class="section_block_table width_960px">
<div class="section_block_header height_50px width_960px bg_color_orange">
<span class="font_color_white font_20px">FAQ</span>
</div>
<div class="section_block_row">
<div class="display_block width_960px margin_top_10px">
<div class="section_block_cell">
<div class="box_orange"></div>
</div>
<div class="section_block_cell">
<div class="display_block padding_left_5px font_weight_bold padding_top_minus_5px">
<span class="font_family_cont_m">What's the best way to get started with archery at Kelly's?</span>
</div>
<div class="display_block padding_left_5px ">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
</div>
</div>
</div>
</div>
</div>
I am trying to get the question to align exactly with the square on the left. So the question text and the square seem as if they are on the same line. Have tried to apply paddings and margins to the question text block, but no luck at all.
Can someone identify what I have been doing wrong?

Answer 1

You need to set the vertical alignment of your table-cell display element.
If you want the square directly in the middle, you can set it to middle:
.section_block_cell {
...
display: table-cell;
vertical-align: middle;
}
JSFiddle demo.
Alternatively you want it at the top, you can set it to top:
.section_block_cell {
...
display: table-cell;
vertical-align: top;
}
Alternative JSFiddle demo.

Answer 2

Not sure about what you try to achieve... If you want your box to be vertical align with the question, see the answers above.
If you want the bow to be vertical align with the first line, i would use absolute positioning for the orange box, with a left padding on the question container :
<div class="display_block width_960px margin_top_10px question">
<div class="box_orange"></div>
<p class="font_family_cont_m font_weight_bold">What's the best way to get started with archery at Kelly's?</p>
<p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
</p>
</div>
And the CSS :
.question {
position: relative;
padding-left: 34px;
}
.question p{
margin: 0;
}
.box_orange {
position: absolute;
top: -4px;
left: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid rgb(255,97,56);
width: 20px;
height: 20px;
}
Updated Fiddle

Answer 3

Adding the below CSS fixes it:
.section_block_cell:first-of-type {
float: left;
}
Updated JSFiddle.
This works even with non display: table-cell elements...