SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% wide table in floated div (IE)

    Hi all,

    I have an absolutely positioned layout, which has a header, and two columns.

    My right column is floated left and automatically fills the rest of the page successfully.

    When i put a 100% wide table inside this right column it expands 100% of the viewport in IE.

    I have tried to use javascript to deal with it but offsetWidth is 0.

    If someone can help me get this into div's i'd really appreciate it, as it seems that the width either over shoots like this or doesn't budge and only the left column is shown.

    Thanks in advance.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
      <head>
    	<title>DataWeb - Welcome</title>
    	<!--<LINK rel="stylesheet" type="text/css" media="screen" href="resources/css/screen.css">
    	<LINK rel="stylesheet" type="text/css" media="screen" href="resources/css/calendarEvents.css">
    	<LINK rel="stylesheet" type="text/css" media="screen" href="resources/css/calendar.css">
    	<LINK rel="stylesheet" type="text/css" media="screen" href="resources/css/niftyCorners.css">
    	<script language="javascript" type="text/javascript" src="resources/js/niftycube.js"></script>
    	<script language="javascript" type="text/javascript" src="resources/js/base.js"></script>
    	<script language="javascript" type="text/javascript" src="resources/js/calendar.js"></script>
    	<script language="javascript" type="text/javascript" src="resources/js/calendarEvents.js"></script>-->
    
    		<style>
    .CalendarEvents_HourItem
    {
    	width: 40px;
    	height: 40px;
    	background-color: #E8EEF7;
    	
    	border-right: solid 1px #DDD;
    	border-bottom: solid 1px #DDD;
    }
    .CalendarEvents_HourItem P
    {
    	margin: 5px;
    	
    	font-family: Verdana, Tahoma, Sans-Serif;
    	font-size: 66%;
    	
    	color: #446688;
    }
    
    .CalendarEvents_RowLower
    {
    	border-bottom: solid 1px #DDD;
    	height: 20px;
    	margin: 0;
    	padding: 0;
    	font-size: 0.1px;
    	line-height: 0.1px;
    }
    .CalendarEvents_RowUpper
    {
    	border-bottom: solid 1px #EBEBEB;
    	height: 20px;
    	margin: 0;
    	padding: 0;
    	font-size: 0.1px;
    	line-height: 0.1px;
    }
    
    html, body, form
    {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	width: 100%;
    }
    .dw_Logo
    {
    	position: absolute;	
    	padding-left: 5px;
    }
    .dw_Menu
    {
    	position: absolute;
    	top: 50px;
    	width: 100%;
    	
    	background-color: #6699CC;
    	background-image: url(../images/dw_menubg.gif);
    	height: 35px;
    }
    .dw_Menu UL
    {
    	padding: 0;
    	margin: 0 0 0 10px;
    }
    .dw_Menu UL LI
    {
    	padding: 0;
    	margin: 0 10px 0 0;
    	line-height: 32px;
    	list-style: none;
    	float: left;
    	
    	font-family: Verdana, Tahoma, Sans-Serif;
    	font-size: 66%;
    	color: #FFFFFF;
    }
    .dw_Menu UL LI.dw_Menu_Login
    {
    	padding: 0;
    	margin: 0 10px 0 0;
    	line-height: 32px;
    	list-style: none;
    	float: right;
    	
    	font-family: Verdana, Tahoma, Sans-Serif;
    	font-size: 66%;
    	color: #FFFFFF;
    }
    .dw_Calendar
    {
    	position: absolute;
    	/*display: none;*/
    	top: 90px;
    	width: 100%;
    }
    .dw_Calendar_Controls
    {
    	position: absolute;
    	left: 203px;
    }
    .dw_Calendar_Controls_DateControl img
    {
    	margin: 0 2px 0 0;
    	padding: 0;	
    	float: left;
    	cursor: pointer;
    }
    .dw_Calendar_Controls_DateControl p
    {
    	margin: 0 0 0 8px;
    	padding: 0;	
    	float: left;
    	
    	font-family: Verdana, Tahoma, Sans-Serif;
    	font-size: 66%;
    	color: #666;
    	line-height: 15px;
    }
    .dw_Calendar_Controls_CalendarView
    {
    	float: right;	
    	
    	font-family: Verdana, Tahoma, Sans-Serif;
    	font-size: 66%;
    	color: #666;
    	line-height: 15px;
    	padding-right: 10px;
    }
    .dw_Calendar_Controls_CalendarView UL
    {
    	margin: 0;
    	padding: 0;
    }
    * html .dw_Calendar_Controls_CalendarView UL
    {
    	margin: 0 10px 0 0;
    	padding: 0;
    }
    .dw_Calendar_Controls_CalendarView UL LI
    {
    	margin: 0 0 0 10px;
    	padding: 0;
    	float: left;
    	list-style: none;
    }
    div.dw_Calendar_DatePicker
    {
    	background-color: #CBDCED;	
    	top: 30px;
    	left: 5px;	
    	width: 200px;
    	position: absolute;
    	z-index: 91;
    }
    * html div.dw_Calendar_DatePicker
    {
    	background-color: #CBDCED;	
    	top: 30px;
    	width: 200px;
    	position: absolute;
    	z-index: 91;
    }
    div.dw_Calendar_Main
    {
    	background-color: #CBDCED;	
    	left: 205px;
    	top: 20px;
    	right: 5px;
    	padding-left: 10px;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	padding-right: 0px;
    	position: absolute;	
    }
    #noScript
    {
    	font-family: verdana, tahoma, sans-serif;
    	font-size: 66%;
    	position: absolute;
    	top: 95px;
    	display: none;
    	left: 10px;
    }
    .dw_Calendar_Main_Content
    {
    	background-color: #FFF;
    	
    	overflow: auto;
    
    	border-left: solid 1px #93BBFF;
    	border-top: solid 1px #93BBFF;
    	border-right: solid 1px #93BBFF;
    	border-bottom: solid 1px #93BBFF;
    	margin: 0 10px 0 0;
    	padding: 0;
    }
    
    .Calendar
    {
    	margin: 5px 0 5px 5px;
    }
    .Calendar_Header
    {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    .Calendar_BtnPrev
    {
    	width: 10%;
    	float: left;
    	text-align: left;
    	
    	cursor: pointer;
    	
    	line-height: 20px;
    }
    .Calendar_Month
    {
    	width: 79%;
    	float: left;
    	text-align: center;
    	
    	cursor: pointer;
    
    	line-height: 20px;
    
    	font-family: verdana, tahoma, sans-serif;
    	font-size: 66%;
    }
    .Calendar_BtnNext
    {
    	width: 10%;
    	float: right;
    	text-align: right;
    	
    	cursor: pointer;
    
    	line-height: 20px;
    }
    .Calendar_DayNames
    {
    	width: 100%;
    
    	line-height: 20px;
    }
    .Calendar_DayNames:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    }
    .Calendar_DayNames UL
    {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    .Calendar_DayNames UL LI
    {
    	margin: 0;
    	padding: 0;
    	float: left;
    	text-align: center;
    	list-style: none;
    
    	line-height: 20px;
    	
    	font-family: verdana, tahoma, sans-serif;
    	font-size: 66%;
    }
    .Calendar_Days
    {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    
    	background-color: #CDD8E2;
    
    	border-left: solid 1px #93BBFF;
    	border-top: solid 1px #93BBFF;
    	border-right: solid 1px #FFF;
    	border-bottom: solid 1px #FFF;
    }
    .Calendar_Days:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    }
    .Calendar_Days UL
    {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    .Calendar_Days UL:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    }
    .Calendar_Days UL LI
    {
    	margin: 0;
    	padding: 0;
    	float: left;
    	text-align: center;
    	list-style: none;
    	
    	cursor: pointer;
    	
    	background-color: #FFF;
    
    	line-height: 20px;
    	
    	font-family: verdana, tahoma, sans-serif;
    	font-size: 66%;
    }
    .Calendar_Days UL LI.Weekend
    {
    	background-color: #E8EEF7;
    }
    .Calendar_Days UL LI.WeekNo
    {
    	background-color: #CDD8E2;
    	border-left: solid 1px #93BBFF;
    	text-align: center;
    }
    .Calendar_Days UL LI.Selected
    {
    	background-color: #557799;
    	color: #FFF;
    }
    .Calendar_Days UL LI.GroupSelection_Weekday
    {
    	background-color: #AACCEE;
    }
    .Calendar_Days UL LI.GroupSelection_Weekend
    {
    	background-color: #99BBDD;
    }
    		</style>
    
      </head>
      <body MS_POSITIONING="GridLayout">
    	
    	<form id="Form2" method="post" runat="server">
    
    		<div id="noScript">Unfortunately your browser is not setup to view this web page correctly.<br /><br />Please enable "Javascript" and try again.</div>
    	
    		<div class="dw_Calendar" id="dw_Calendar">
    		
    			<div class="dw_Calendar_Controls">
    			
    				<div class="dw_Calendar_Controls_DateControl">
    				
    					<img src="resources/images/dw_calendar_controls_btnprev.gif" alt="Previous" title="Previous"  onclick="calendarMiniControls(this);" />
    					<img src="resources/images/dw_calendar_controls_btntoday.gif" alt="Today" title="Today"  onclick="calendarMiniControls(this);" />
    					<img src="resources/images/dw_calendar_controls_btnnext.gif" alt="Next" title="Next"  onclick="calendarMiniControls(this);" />
    					<p id="selDate">Wed 11th October </p>
    					
    				</div>
    				
    				<div class="dw_Calendar_Controls_CalendarView">
    				
    					<ul>
    						<li><img src="resources/images/dw_calendar_controls_btnprint.gif" alt="Print Calendar" title="Print Calendar" /></li>
    						<li>Day</li>
    						<li>Full Week</li>
    						<li>Working Week</li>
    						<li>Month</li>
    						<li>Summary</li>
    					</ul>
    				
    				</div>
    			
    			</div>
    			
    			<div class="dw_Calendar_DatePicker" id="dw_DatePicker">&nbsp;</div>
    			<div class="dw_Calendar_Main">				
    				<div class="dw_Calendar_Main_Content" id="dw_CalendarContent">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>0</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>1</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>2</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>3</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>4</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>5</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>6</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>7</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>8</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>9</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>10</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>11</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>12</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>13</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>14</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>15</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>16</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>17</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>18</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>19</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>20</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>21</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>22</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    <tr>
    <td rowspan="2" class="CalendarEvents_HourItem">
    <p>23</p>
    </td>
    <td class="CalendarEvents_RowUpper">&nbsp;</td>
    </tr>
    <tr>
    <td class="CalendarEvents_RowLower">&nbsp;</td>
    </tr>
    </table>
    				</div>
    			</div>
    				
    		</div>
    	
    		<div class="dw_Logo"><img src="resources/images/dw_logo.gif" alt="DataWeb" title="DataWeb" /></div>
    		
    		<div class="dw_Menu">
    		
    			<ul>
    				<li>Home</li>
    				<li>Calendar</li>
    				<li>Group Calendar</li>
    				<li class="dw_Menu_Login">[ Login ] [ Welcome Gavin | Logout ]</li>
    			</ul>
    		
    		</div>
    		
    	 </form>
    	
      </body>
    </html>


  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could make the table a percentage that matches the column size, not 100% - something less.

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    possibly, but wouldn't that defeat the object? Surely it should be displaying at 100% of the parent element?

    Also setting it as a smaller percentage would mean that depending on the screen size it will smaller then it should be.


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You just need to force layout on the element that holds the table otherwise ie doesn't know where its boundaries are.

    Code:
    /* mac hide \*/
    * html .dw_Calendar_Main_Content{height:1%}
    /* end hide */
    See faq on "haslayout" for the explanation

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gRoberts
    Surely it should be displaying at 100% of the parent element?
    yes it will if you apply my fix. If the element doesn't have "layout" the IE doesn't really know how big the element which is why it pushes the table to 100% of the screen width. Applying "layout" brings ie back into line and it will display the table at 100% of the parent instead

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you solved my previous problem and you've solved this one too. Now I can see why your the "css guru".

    Thank you again and Thank you John for your input too.


  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries - glad to almost help !

    Even more glad Paul has that "sight beyond" sight that allows him to recall all sorts of CSS situations - been so long since I nested a table in a float I don't remember all their quirks off the top of my head.

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a often problem for me, I prefere to use css to replace tables etc but some times you can't avoid using a table.



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
  •