Trying to achieve something that I assumed would be straightforward, but CSS always has its surprises!
The issue I'm facing is with an image floated to the left. Next to the image, I have a title, and below the title, but still alongside the image, I want to display a table taking up all remaining width. In Chrome and IE, the table ends up under my image, while in Firefox, it extends beyond 100% width (resulting in a horizontal scrollbar). Firefox is closer to the desired outcome, but I want to avoid the scrollbar.
Here is the code I attempted to troubleshoot using the w3school "try it" editor (http://www.w3schools.com/css/tryit.asp?filename=trycss_float)
<html>
<head>
<style type="text/css">
h1{
font-size:1em;
}
img
{
float:left;
}
.field{
width:100%
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<div class="content">
<h1>this is the title</h1>
<form>
<table width="100%">
<tr>
<td><input type="text" class="field"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
The structure may seem overly complex for a simple form, but the forms are automatically generated by a PHP script, so I'd prefer to maintain that setup.