CODEWITHSUNDEEP
htmlcsswidth
Meep3D
Meep3D

Reputation: 3756

Site wider than browser without horizontal scrollbars

I've got a site that I am working on that has greebles on the top left, top right, bottom left and bottom right corners. The full width of this is roughly 1100px. The actual content area is within the 960px layout.

I want the site to be properly centered right down to 960px, with the extra imagery disappearing out the right and left, but not causing any horizontal scrolling provided it is over 960px.

All four images are seperate files (can't really join them) and there is already a background image. Did I mention that they are added through CSS, rather than as in-file images?

Thanks!

Edit: This really has to work in IE6. Not my choice :(

Upvotes: 4

Views: 2552

Answers (4)

Brian Vallelunga
Brian Vallelunga

Reputation: 10191

Not sure if you solved this, but I think it is possible using background images. If you layer the images on top of one another, without specifying a width for their containing divs, you should be able to pull it off. Here's the basics:

<body style="background: url(body-bg.png);">
    <div style="background: url(greeble1.png);"></div>
    <div style="background: url(greeble2.png);"></div>
    <div style="background: url(greeble3.png);"></div>
    <div style="background: url(greeble4.png);"></div>
    <div class="wrapper" style="width: 960px;">
      <p>Main Content Area</p>
    </div>
</body

I think you'd need to use a bit of JS to position each of the greeble background images depending on the size of the image and the viewport, but it should be possible.

Upvotes: 0

Meep3D
Meep3D

Reputation: 3756

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449395

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 &nbsp; 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>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074138

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.

Upvotes: 3

Related Questions