I've been working on a website design and trying to position text next to an image. It seems like a simple task, but I'm struggling to make it work.
Here's an illustration of how I want the layout to look:
So far, here is the HTML code I've experimented with:
<div class="example">
<div class="eg1">
<img src="eg1.gif" />
<h2>Example 1</h2>
<p>This is an example</p>
</div>
<div class="eg2">
<img src="eg2.gif" />
<h2>Example 2</h2>
<p>This is another example</p>
</div>
</div>
and my attempted CSS styling:
.example {
display: inline-block;
}
.eg1, .eg2 > img {
float: left;
}
.eg1, .eg2 > h2 {
float: left;
}
.eg1, .eg2 > p {
float: left;
}
However, the result is not at all what I wanted. The elements are stacked vertically instead of side by side, with the text appearing in the wrong position relative to the images.
What would be the most effective way for me to achieve the desired layout?