Adding div scroll bars that don't add horizontal scroll bar to page

if you use overflow:scroll instead of overflow auto then then the space for the scrollbars will be allocated even when they are not need, but the width will be consistent.  The problem is that some do not like the look of that extras spece, save for the scrollbars.  

If you post a link to th epage or the code, we may be abel to see other solutions.

Cd&

I thought of using overflow: scroll, but I don't really want or need the horizontal scroll bar (I intended to mention this in my original post). If there was a way to get rid of that, I'd go with that solution.

As to a link to the page, I'm still at the point where I'm developing this on my local machine. I can post the raw code, but it's interspersed with php "stuff" essentially it's:

<div ID="frame">  \\width not set
  <div ID="section"> \\width not set
    <div class="rowwrap"> \\width="100%" due to containing floated divs
      <div class="col1"> content <\div> \\width="xxem"
      <div class="col2"> content <\div> \\width="xxem"
      <div class="col3"> content <\div> \\width="xxem"
      <div class="col4"> content <\div> \\width="xxem"
    </div>
  </div>
</div>

Thanks,
RWW

Well, your answer is probably the best solution, so if no one else comes up with a way to stick with my divs, I'll give you the points. I'm not going to implement the table solution for time and redesign considerations. This particular page will only be part of an administrative backend to a set of conference registration forms, and I decided I can live with reducing the frame width to 98%, which, when the scroll bars are visible gives about a 2 or 3 pixel white line down the edge of the scroll bar. If the child divisions had a white back ground, no one would even know.

Thanks anyway. Really it was just a plot to get you to admit that tables still have a place. I recently had this debate on another list and said basically what you said above that tables do have their place, for which I was soundly rebuked as being backward and uninformed because css and divs could do anything that tables can and better. Different strokes for different folks, I guess.

Thanks
RWW

Yeah if you go through my PAQ yu will find there is no one on the site more adamant about not using tables for layout.  You will also find that I hate it when when CSS and DIV are somehow linked.  The div was part of HTML before CSS and just happen to be useful for a lot of the CSS implementation early on because browsers still lack a lot of the support necessary to use all tags correctly in CSS.

The bottom line is that HTML has a whole range of tags with their own uniques set of behaviours and each needs to be used where it belongs.  Don't use a hammer to put in screw because it is the only tool you have; learn to use a screw driver and you become a mmaster craftsman.

Cd&

I dunno where you learned carpentry. Those little slots in the top of the nails are only for if you ever have to take them out. :-)

Cd&,

I decided to switch over to tables for this after all, but is there a way to get the table rows to stretch the whole width of the conaining div without resizing the cols? I want the first 3 of four columns to have a set width, and the last of the four to stretch to fill up the rest of the row, primarily for appearance sake.

Thanks,
RWW

Thanks stepping Jakob.  I think the only thin we want to add to that is to use table-layout:fixed on the table style so that the browser does not resize the first three columns for a change in font-size or sme similar rendering stress.

Cd&

Ok. I'll give this a try later tonite. Out of time at the moment. My only questions are these: Why do I want to use a pixel size for #frame width? Doesn't that mean that either the frame will only occupy a part of the screen on larger higher resolution monitors or cause horizontal scroll bars on smaller lower resolution monitors? Why wouldn't I want to resize the column width for a change in font size or rendering? The idea here is that the content fills the first three columns' widths and doesn't row wrap in column 4 until someone does something like change the text size to large. At a normal and readable resolution, the content of col4 will not fill it's width and won't wrap within the cell. The reason for wanting full width of the table within the div is that alternating rows have a different background color, and there would be no way to have the div's background mirror that. I don't have this on a live site so I can't give you a look at what I mean, so I hope you can follow my explanation.

Thanks.
RWW

I tried it out, but using ems for the col widths and it works as I want. change in text size resizes column widths with all except col4 getting wider and col4 filling out the row and downsizing on text size increase. Thanks. works like a charm.

I think we misunderstood how you wanted the columns react.  It is a common setup to have fixed column widthes and the floater to axpand and shrink as necessary to maintian the fixed widths.  The setup you wanted is different in that you d want the fixed columns to re-size under some conditions, so the em sizing does make sense.

Thans for the A. :^)

Cd&

Hey, I wish it was money, but hopefully the points help you out somehow.

The grade is what matters.  It means we help someone solve a problem; and that is why we are here.

Cd&

I think I spoke too soon. The vertical scroll bar still get's pushed beyond the normal width of the div#frame, just as it did when I used all divs for the tabular data.

Grrrr... I hate web site design some days.

Thanks.
RWW

Can you post your CSS please.

Cd&

#frame {
  border: 1px solid #626699;
}

div#adminsection {
  background: #ffffff;
  border-bottom: #004080 solid 1px;
  border-left: #004080 solid 1px;
  border-right: #004080 solid 1px;
  height: 250px;
  overflow: auto;
}

table.guestlist {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;    
}

tr.rowwrapdark {
  background-color: #ddeff5;
  line-height: 150%;
  padding-left: 5px;
}

tr.rowwraplight {
  background-color: #eaf5f9;
  line-height: 150%;
  padding-left: 5px;
}

td.col1 {
width: 8em;
text-align: center;
vertical-align: top;
}

td.col2  {
width: 5em;
text-align: center;
vertical-align: top;
}

td.col3 {
width: 16em;
text-align: center;
vertical-align: top;
}

td.col4 {
vertical-align: top;
}

// page

<div id="frame">
  <div id="adminsection">
    <table class="guestlist">
         table rows and columns
    </table>
  </div>

  <div id="adminsection">
    <table class="guestlist">
         table rows and columns
    </table>
  </div>
</div>

HTH,
RWW

Try this:

table.guestlist {
  border-collapse: collapse;
  table-layout: fixed;
  width: 98%;
  margin:0 auto 0 auto;  
}

If that doe not do it, Post back and I will look at it in the morning to se what kind of tweak it needs.

Cd&

nope.

If there are not enough rows in the table to cause the scroll bars to appear, the table is now centered within the div with white space on either side. When there ARE enough rows to cause the appearance of the scroll bars, there is still a white line down the side of the scroll bar. That's essentially what I had with all div layout.

Is there any way to programatically set the table width based on whether or not it's  more than the height of the div it's in (250px) Something like "if  table height > 250, table width=(width -16px)

Sorry.
RWW

The best I've been able to do with this so far is to make the table less than 100% width. On a 17" monitor, 98.4% shows no horizontal bar and no white line down the edge of the vertical bar.

You can set it dynamically off the load this way:

<body onload="if (document.getElementById('guestlist').offsetHeight>250) document.getElementById('guestlist').style.width=(document.getElementById('guestlist').offsetWidth - 16)+'px';">

So you can define it 100% and it will stay that way unless the height is greater then 250.  Might require a pixel or 2 adjustment

Cd&

That works. I had to change table.guestlist to table#guestlist and on the pages where I have two tables, I'll have to add a second onload statement for table#guestlist2 (or can the js above be changed to apply to more than one ElementID?), but other than that, it seems to resolve the problem. I want to experiment, too, with an onresize event for the page being resized.

Thanks again.
RWW

If you have two, do it this way in the head of the page:

<script type="text/javascript">
targets = new Array('guestlist', 'guestlist2');
function fixDim ()
{
   for (i=0;i<targets.length;i++)
   {
      obj=document.getElementById(target[i])
      if (obj.offsetHeight>250) obj.style.width=(obj.offsetWidth - 16)+'px';
   }
onload=fixDim;
</script>

That way if you nee another table you just add the name to the table and the script will take care of it too.

Cd&

Hmm, that doesn't work. It gives a js error, which at first said there was a mission } which I tried both before and after onload=fixDim;  Then I tried changing onload=fixDim; to onload=fixDim(); but that made no difference either. Would this have anything to do with guestlist and guestlist2 having a width defined in the linked style sheet as 100%?

In any case, repeating what you gave me to put in the body onload tag works fine. You've more than earned the points already.

Thanks.
RWW

Yeah is was missing a closing brace it should be:

<script type="text/javascript">
targets = new Array('guestlist', 'guestlist2');
function fixDim ()
{
   for (i=0;i<targets.length;i++)
   {
      obj=document.getElementById(target[i])
      if (obj.offsetHeight>250) obj.style.width=(obj.offsetWidth - 16)+'px';
   }
}
onload=fixDim;
</script>

Nope. Doesn't work. Putting the js in the body tag does, but not this way.

Again.
Don't feel obliged to put more time into this as it works the way I have it.

Thanks.
RWW