How to make my table width as wide as a div?

[MDWeezer]

Here is my CSS

[code]
#container{
overflow: scroll;
width:550px;
border:1px black solid;
overflow-y: hidden;
margin-bottom: 10px;
}
#dataTable{
border-collapse: collapse;
border: black 1px solid;
width: 100%;
background-color: #f7f7f7;
}
#dataTable .rowHeader{
    background-color:#ffffff;
white-space: nowrap;
border: 1px silver solid;
text-align:center;
padding: 2px;
left: expression(document.getElementById("container").scrollLeft-1);
position: relative;
}
#dataTable td{
white-space: nowrap;
border: 1px silver solid;
padding: 2px;
}
[/code]

This code produces a table with a fixed first column (I have a lot of data to display... this way I can have the user scroll and the first column is always visible so they know what data they're looking at).

However, the container width of 550px if very small.  This will be run on a variety of screen resolutions so I would like the table to adjust its width to as wide as it can get depending on screen resolution.

Not too familiar with CSS but I've toyed with a few attritutes on the container div but no such luck.

Any suggestions?

Thanks!

[wildteen88]

You'll want to work with percentages rather than pixels if you want the your layout/div to fit in all screen resolutions.

[MDWeezer]

[quote author=wildteen88 link=topic=111192.msg450430#msg450430 date=1160571868]
You'll want to work with percentages rather than pixels if you want the your layout/div to fit in all screen resolutions.
[/quote]

Wow, what a "duh" moment...

Thanks for the quick fix

[dbrimlow]

[code]You'll want to work with percentages rather than pixels if you want the your layout/div to fit in all screen resolutions.

Wow, what a "duh" moment...

Thanks for the quick fix[/code]


Whoa! That isn't a quick fix by any means. wildteen88 was just telling you that in order to have a "flexible" aka "floating" layout that will auto adjust for any screen res, you have to use percentages for ALL non-fixed sized content.

Photos and graphics with text and/or pictures are fixed pixel, while layout divs, tables, background simple graphics and text fonts are flexible. There is no point having your layout auto adjust if the fonts are fixed and vice-versa. And that's where using "em" instead of "px" sizing for fonts, margins, padding, etc is usefull because ems can be easily tweaked to be "just a smidgeon bigger or smaller".

BUT, that can also be tricky if you don't understand css (and drive you nuts!) because the em size is relative to the font size of the div it is in (not the body font size). % sized fonts, margins, padding, are better for beginners to use instead, until they get more comfortable with non-table layout.

It looks to me as if you code specifically for IE, judging by the use of an IE expression within your actual style. This will not validate and may cause strange things in real browsers because "left, right, top" is a positioning element meant to position your div the designated distance, respectively, from its container for relative positions or for absolute positions the browser window itself - well, except if the absolute position div is placed within a relative postioned container div, then the absolute "left" designation will be spaced relative to the relative positioned div left boundry - LOL, if you don't know css and/or that totally just confused you, sorry :)

Actually, I now see a few things in your css that may be dangerous for cross browser rendition.

Flexible layout can be a real tricky thing to do if you are not familiar with css and IE hacks, because every version of IE (including 7.0) will handle flexibility (boxes, floats, absolute positioning, margins and paddings) much differently than real browsers. Specifically, spacial distances for positioned elements and ALL block level tag elements (lists, paragraghs, blockquotes, headers).

But this doesn't help you solve your issue.

Yours is MUCH trickier because you, in essence, want to have a non-fixed-height "positioned" div that scrolls down any overflow within a table cell, that will now also have no fixed height. Usually we specify a visible height so any initially hidden overflow scrolls. After playing with it I found that either a fixed px height or an em height works - This was something of a challenge to me because I've never tried using a flexible overflow before; it gave me a hard time using percentages for the height. But after playing, I was able to easily designate an em instead of px or percent.

You have to use a position:relative div in your scrollable cell. and place that within the right columned table cell.

So, using an old (poor html) form I had lying around, I was able to get it to be flexible (an inelegant, markup messy solution, that can be done without the table).

[url=http://www.bluesmandeluxe.com/ae/flexscroll.html]http://www.bluesmandeluxe.com/ae/flexscroll.html[/url] Feel free to grab the source code. I stripped away the old form actions and validations so it is just a broken dummy form for effect.

here is the css (I didn't use css "shorthand" since you are a beginner):
[code]

body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#333;
background-color:#FFFFFF;}

#container {
/* everything goes within this div*/
width:100%;
height:100%;
background-color:#FFFFFF;}

table {
/* this is your control table for the left/right cells - unless otherwise specified, all tables will use this body level tag command */
width:95%;
border:none;
padding:0;
background-color:#FFFFFF;}

.td1 {
/* left column class style */
width:25%;
height:100%;}

.td2 {
/* right column class style - I like to keep 1%, 1 px, etc shy of making the 2 a full 100% */
width:74.99%; /* I like to keep 1%, 1 px, etc shy of making the 2 a full 100% */
height:100%;}

.tr1 {
/* This class controls how the left cell behaves and is for the left cell data - all visible */
  position:relative;
width:95%;
height:100%;
top:0px;
left:1px;
visibility:visible;
overflow: visible;}

#content {
/* This class controls how the right cell behaves and is for the right cell data - scrollable */
font-size:85%;
position:relative;
left:1px;
width:90%;
height:30em; /* This is the crucial bit - you can use a fixed height like "300px", or an em - I couldn't get it to work using percentages */
top: 0px;
visibility: visible;
overflow: auto; /* I leave this up to the browser so I can debug any mangling by an IE version */
background-color:#FFFFFF;}

#content table {
width:90%;
color:#666;
background-color:#FFFFFF;}
[/code]

Here is the html structure:
[code]
<body>
/* open container */
<div id="container">
/* open main table */
  <table>
    <tr>
      /* apply style to left cell */<td valign="top" class="td1">
      /* open left cell container div */ <div class="tr1">

          <p>non scrolling content</p>
          <p>The font size is 100% </p>
       
/* close left cell container div */</div>
</td>
      <td>
/* open right cell container div */
<div id="content">
          /* open new table within right cell*/
            <table width="100%">
              <tr>
                  <td colspan="5" ><your content in a table</td>
                </tr>
              </tbody>
            /* close new table within right cell*/
</table>
  /* close right cell container div */     
</div>
</td>
    </tr>
/* close main table */ 
</table>
/* close container */
</div>
</body>

[/code]