another float problem

**vince_w** · Feb 9, 2008 22:46

Hi. The table in my right column drops below the left if the window is too small. I read the FAQ that talks about float drops here:

http://www.sitepoint.com/forums/show...5&postcount=15

The sample code works. I copied it here: http://www.socialect.com/float.html.

I can stop the float drop by adding this to my css:

Code CSS:

table {float:left;}

but then the border around the table is not drawn correctly.

Here's the site with my original CSS where the table in right column drops below left column

http://www.socialect.com/events?city=Boston

The page works fine in firefox and opera but not on IE. Can someone help? I've spent so much time on this...

**Dan Schulz** · Feb 10, 2008 01:43

Your page isn't loading for me (taking too long), but have you tried adding display: inline; to the style rule?

**vince_w** · Feb 10, 2008 21:09

I added display: inline; to #left but that didn't help with the float drop either. I created a new file to show the problem at http://socialect.com/float_table.html

If you still can't access the site, I've pasted the code below. I've been stuck on this for a few days so any help is greatly appreciated

p.s. I think it's pretty clear what I'm trying to do, but I'm basically trying to create a 2 column layout where the left menu has a fixed width and the right column contains a table which expands to fill the rest of the screen, but more importantly does not drop below the left column if the window is too small.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
#left {
	float:left;
	width: 200px;
	height:400px;
	background:red;	
}
#content {
	margin-left:220px;
	background:yellow;
}
</style>
 
</head>
<body>
 
<div id="left">
	This is the left
</div>
 
<div id="content">
	<table>
		<tr>
			<td>The Savages</td>
			<td>60 Vassar Street, Cambridge, MA</td>
			<td>Apr 04, 2008</td>	
			<td>Apr 06, 2008</td>
			<td><div class='no_wrap'> 7:00 - 9:00 pm</div><div class='no_wrap'>10:00 -11:45 pm</div></td>
			<td>$4.00</td>
			<td>interested</td>
			<td><a href="/user/autobot">autobot</a></td>
		</tr>
		<tr>
			<td>Across the Universe</td>
			<td>60 Vassar Street, Cambridge, MA</td>
			<td>Feb 15, 2008</td>	
			<td>Feb 17, 2008</td>
			<td><div class='no_wrap'> 7:00 - 9:00 pm</div></td>
			<td>$4.00</td>
			<td>interested</td>
			<td><a href="/user/autobot">autobot</a></td>
		</tr>		
	</table>
</div>
 
</body>
</html>

**Dan Schulz** · Feb 10, 2008 21:49

Then try adjusting the widths.

**vince_w** · Feb 10, 2008 21:58

Hi Dan. I'm not sure which element you're referring to for adjusting widths. The #left element has a width of 200px and I want the table in #content to fill up the rest of the screen while also not dropping below #left if the table is too wide.

Apologies for the newbie questions

User Tag List

Thread: another float problem

Thread Tools

Display

Hybrid View

another float problem

Bookmarks

Bookmarks

Posting Permissions