SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    Boston
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    another float problem

    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...

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your page isn't loading for me (taking too long), but have you tried adding display: inline; to the style rule?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    Boston
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then try adjusting the widths.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    Boston
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •