11 replies [Last post]
Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

We've got a div that is the main container of our page's content and it's styled like this with a border.

#main
{
    padding: 0px 30px 15px 30px;
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
    border: 1px Solid Black;
    width: inherit;
}

we want the border to fit to just inside the page width as it does with that styling. However, sometimes the content (a table) extends beyond the limit of the viewport, so currently this overlaps the border and extends off the page. As an added complication, sometimes we have floating lists of images, etc, that need to wrap around within the page width, and it's only where it's a single element where we want to allow this width extension. Is it possible, in the case of this wide table, to extend this border to encompass the wider content, rather than it overflowing the border? Personally, I'm guessing not and the border either has to go to the width of the content, or be relative to the viewport but not be able to do both?

Thx MH

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

Hi Mad-Halfling, Should width

Hi Mad-Halfling,
Should width be auto or not specified rather then inherit?

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

sorry, ignore the width:

sorry, ignore the width: inherit line - that was me playing around trying to get it working and that isn't in the actual code, I just forgot to remove it before copying it to paste into here (I don't seem to be able to edit my post) - it's late, here, must go to bed.

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Code

Here is some code that reproduces the problem:-

<!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></title>
</head>
<body>
<div class="page">
  <div id="header">
   Header Area     
  </div>
 
  <div style="border: Solid 1px Blue;">
 
 
 
 
        <table>
                <tr>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                    <th>Header Text</th>
                </tr>
 
        </table>
  </div>
 
  <div id="footer" class="CurvedBorder">
    Footer Area
  </div>
</div>
 
</body>
</html>

If you remove the doctype line and try it with IE8 then it works as we desire - when the table gets too wide for the page, it extends off the visible page area and the border remains around it. But with the doctype in, or in Firefox, when the table extends off the visible page area you still get the border visible on the page area and it cuts through the table.

I realise that the behaviour it's exhibiting is probably correct, but is there a way to get the border not to cut down through the table, if the table can't compress it's width to remain completely within the visible page width?

Just to pre-empt a suggestion, we can't really put scrolling on overflow in the div that contains the table as the table could be rather long, os it's a pain to scroll right to the bottom to get the scroll-bar for the div, so the table can then be scrolled left and right. We wanted the scroll-bar to appear at the window level.

Thx MH

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

display: table

There is an element who is required by law to enclose its children until the cows come home and hell freezes over and the universe contracts... tables.

I'm not sure I'd recommend it for an entire page, but if your page pretty much just has tables in it anyway, it looks like setting your blue-bordered collie to display: table makes the border stay around the outside of the table.

The body still won't play along if it's got a bg colour or whatever, and if you like this result I'd definitely test in some screen readers. Not sure if the ones who decide "display: table" means "this is a table" will then consider child tables to be nested tables, but who knows. Depending on your content this might be a winner.

<legalese>Void where prohibited. Does not work in Internet Explorer 6 or 7.</legalese>

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 min 57 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9229
Points: 3235

Good idea, poes

Hi, Mal, it's been a while since you graced us with your company. Hang around more; you raise the class of the joint.

Rather than put the {display: table;} on the containing div, put it on the body element, like so:

body {
    background-color: yellow;  /*illustrates that body expands,  
                                 not overflows*/
    display: table;
    width: 100%;
    }
 
.page {
      border: 1px solid black;
      display: table;
      margin: 20px auto;
      width: 90%;
      }
A table automagically shrink-wraps its content, so a width is provided to set a minimum width. As Stomme poes said, a table expands to enclose its content, so a declared height or width is treated as a minimum.

Note also the treatment of div.page.

IE8, with no DTD, acts like IE5/6, that is hasLayout kicks in and cause all sorts of havoc and mayhem.

This does not address the issue of the float elements. Without a more complete test case, :shrug:

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Ask thanks, I can see your

Ask thanks, I can see your logic there but this is a container for the whole site, and even on the page in question there's more that just the table, there's flowing div containers with input boxes that flow according to the page width, etc I supplied that simple example so as not to over complicate things. But even if that was the only control on the page, the border is party of the site master template, so it's probably not the best idea to put the whole site in a table. Also the site needs to work fairly well with IE 7 most probably, and possibly 6a we have customers with old PCs who won't have the newer versions of windows, so that may also make that option not so good. Thanks anyway, every suggestion is appreciated, I'll certainly have a look into it

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 min 57 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9229
Points: 3235

IE6/7

I think you will find this works for IEs 6 & 7, for the same reason no DTD made it work for IE8.

We can only fix what you show us; trying to do so without disturbing page elements we can't see is a lost cause. It's not that hard (usually) to apply constraints or allow reflow as needed to support the design template.

Post links to typical pages, one with a small, no overflow table, and one with the large table. If you're concerned about proprietary info, use dummy text and table data.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

I'll try to mock up some

I'll try to mock up some examples. I thought that (ab)using tables for layout was a big no-no, these days? Or it a case of needs-must-when-the-devil-does-his-business-in-your-cornflakes (Baldrick) ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 min 57 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9229
Points: 3235

Style vs substance

It may seem a fine point, but {display: table;} is a completely different animal from an html table structure.

An html table is a container for table rows which contain cells, either th or td elements. These elements have certain characteristics which are set by the browsers' internal style sheets or configuration files. As it happens, Firefox's style sheet for a table element says among other things that it is {display: table;}. Other elements have different semantic and structural purposes, but if you need them to have a table's characteristics, you may set the display property to table.

In this case, this is what we're doing. We want the body element to resize itself to enclose an oversized table rather than having an overflow. We want a table's characteristics, but we definitely do not want a table's structure.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Fair point, I'll have a look

Fair point, I'll have a look at this

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 2 years 33 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Thanks folks, finally had an

Thanks folks, finally had an opportunity to play with these. The work well, apart from us having a footer section, hahaha. I think, with our weird combination of things, there isn't a solution that doesn't break something else, but this was very, very helpful in getting me close enough and being able to suggest various options and see what they want.

Thanks for your help, much appreciate

MH