I know there are a lot of talented people on here so I'm after a bit of CSS help.
Essentially I want to have an image floated left with a url link underneath it, adjacent to it will be some text and the whole lot will be underlined by a border.
The problem is, if the amount of text rows is less than the height of the image, the border is directly under the text, not the floated image.
Here's the code if it helps:
And this is what it looks like:
But this is what I want it to look like:
Please help, it's driving me mad
Essentially I want to have an image floated left with a url link underneath it, adjacent to it will be some text and the whole lot will be underlined by a border.
The problem is, if the amount of text rows is less than the height of the image, the border is directly under the text, not the floated image.
Here's the code if it helps:
HTML:
<div style="border-bottom: 1px solid">
<h1>Section Title</h1>
<div style="float: left">
<a href="/data/a/"><span style="background-image: url('img.png');"></span></a>
<h3><a href="/data/a/">Title</a></h3>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet, nisi in dignissim feugiat, nunc nisl rhoncus mi, vel convallis augue nibh quis tortor.</div>
</div>
And this is what it looks like:
But this is what I want it to look like:
Please help, it's driving me mad