I have a question regarding formatting h2 and h3 elements to display as inline-block. Below is the code snippet:
<div id="content" class="content-width">
<h2 class="headline"> My Headline </h2>
<h3 class="subheadline"> My Subheadline </h3>
<table id="actions">
... some table content
</table>
<div> more content... </div>
</div>
Here is the corresponding CSS:
div.content-width {
width: 90%;
margin: 0 auto;
min-width: 900px;
}
h2.headline {
margin: 30px 0 0 0;
padding: 0;
display: inline-block;
font-size: 30px;
}
h3.subheadline {
padding: 30px 0 0 0;
display: inline-block;
font-size: 16px;
margin: 0 0 0 8px;
color: #b3b3b3;
}
table#actions {
float: right;
padding: 0;
margin: 34px 0 0 0;
}
The issue I am facing is that in Chrome, the h2 element gets centered instead of aligned to the left, while the h3 appears next to it. Additionally, the table is displayed under both h2 and h3 elements, as if they were block elements. This behavior was unexpected. Any suggestions on how to properly align them?