No replies
seb
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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 Smile