Fri, 2005-02-18 11:10
I want to structure this as best as I can. I don't like to use tables for non-tabular data, and I don't like to put heights on a box that should be able to work it out for itself.
<div id="council" class="box"> <img src="images/council.gif" /> <h2>Council</h2> <p><a href="register.asp">Click here</a> for overview of council</p> </div>
div#side div.box { border: 1px solid black; background: #fff; text-transform: lowercase;} div#side div.box h2 { font-size: 1.1em;} div#side div.box img { float: left;}
But of course by floating the image the div doesnt surround it correctly.
Only solutions I can come up with are
1) use a table
2) put a height on the div
3) add a <br style="clear:both;" /> before the closing div tag.
Am I missing something obvious?
Also I don't like putting the IMG before the H2 in the HTML, it seems wrong.
Advice please