ansaurus

Question

Site wider than browser without horizontal scrollbars

Answer 1

+3 A:

You can use overflow: hidden in the CSS for your body tag (or whatever container tag you have your main content in) to prevent scrollbars. Some browsers allow you to constrain that just to horizontal or vertical content (-ms-overflow-x and overflow-x in your case, because you're dealing with the horizontal overflow; there are corresponding y styles). I think these are / are going to be part of CSS3, according to this link.

T.J. Crowder 2010-03-07 16:22:48

I don't think this is what he wants - he wants the surrounding content to not cause scrollbars, but he wants scrollbars if the viewport is < 960px wide.

Pekka 2010-03-07 16:26:58

@Pekka: That should be fine, if the layout uses `max-width` or similar and an inner container with `overflow: scroll`. Not a big fan of fixed-width layouts myself, so I haven't experimented with it too much.

T.J. Crowder 2010-03-07 16:27:40

@T.J. clever thinking, didn't think of that. But that would cause a scrollbar *in the content area*, instead of the body, when it overflows vertically. You could prevent that using `overflow-y` but then you'd have browser compatibility issues (I think IE6 and possibly even IE7, can't find info right now.)

Pekka 2010-03-07 16:31:39

I've got to support the horror-show that is IE6 unfortunatley :(

Meep3D 2010-03-07 16:34:03

@Meep3D: According to the MSDN link, if you apply it to the `html` element, it should work even for IE6. Good luck in any case.

T.J. Crowder 2010-03-07 16:37:23

Answer 2

+2 A:

I'm sorry folks, but the only way I can see this working including IEs 6 and 7 is using tables.

Working example: Here

The "Greeble" text (I don't really know what a greeble is :) distorts the resizing somewhat, that'll disappear when the columns have background images only.

Issues: The columns need to contain something to be rendered by IE. The   I built in will prevent the complete disappearance of the right and left columns. You will have to find a way around that, maybe with a 1x1 Pixel image or something. You will always have to have some content - even if just 1 pixel wide - in all columns.

Relies on: Tables with an unspecified width rendering the way they do. I think this is pretty reliable, tough.

Tested in: IE 5.5 and greater, Firefox

To anybody who dares downvote this because tables are evil: Find me a better, CSS-based solution that works in IE6 as well, and I will gladly remove mine.

HTML: No separation between markup and CSS, no semantics, just the working prototype.

<body style="margin: 0px">
<table style="width: 100%; height: 100%" border="0" 
      cellspacing="0" cellpadding="0">
   <tr>
     <td style="background-color: orange; height: 50%; color: white">
     Greeble top left
     </td>

     <!-- The content area -->
     <td style="width: 960px" rowspan="2">
      <!-- This is important, serves as min-width replacement. -->
      <div style="width: 960px; text-align: center">
        &nbsp; I will always be 960 pixels wide
      </div>
     </td>

     <td style="background-color: blue; color: white">
     Greeble top right
     </td>
   </tr>
   <tr>
     <td style="background-color: blue; height: 50%; color: white">
     Greeble bottom left
     </td>
    <td style="background-color: green; height: 50%; color: white">
     Greeble bottom right
    </td>
 </tr>
</table>
</body>

Pekka 2010-03-07 16:40:10

Don't be sorry about using tables. Until/unless CSS is adequate to the task, we do what we have to do.

T.J. Crowder 2010-03-07 16:52:00

@T.J. yup, some things can't be done without tables. At least not sanely.

Pekka 2010-03-07 16:54:25

Answer 3

A:

I think I've worked out a ludicrously simple way of doing it: Add an empty div for each corner element, position it relatively and then give it a negative (or high positive for the rhs) margin - seems to work in IE 6 too.

Thanks for all the ideas though.

Meep3D 2010-03-07 16:54:08

Hmmm horizontal scrollbars on positively aligned absolute items. Fail. :(

Meep3D 2010-03-07 19:55:50

ansaurus

tags:

views:

answers:

Site wider than browser without horizontal scrollbars

related questions