Patrick Taylor

CSS blocks wider than their container

The complicated business of using CSS3 to deal with different screen widths, even on a simple website, when you want to break out of a standard column.

This page relates to superMicro CMS as used on this website.

Some of the features illustrated on this page won't be visible on narrow screens, eg: mobile phones and some tablets in portrait mode.

A way to break out of a standard column

This containing column is 740 pixels wide on desktop screens wide enough for it. The wider blocks below (typically images, including slides, but can be text) are up to 1200 pixels wide and centred on the containing column. This is done using a negative left margin equal to half the width of the wider block (1200 pixels) minus half the width of the containing column (740 pixels) and with position: relative.

For example, 600 pixels (half of 1200px) minus 370 pixels (half of 740px) = 230 pixels (left margin = minus 230px when screen is at least 1256 pixels wide).

Wider block (text only). Reduces in width as screen width reduces in stages: from 1200px to 1024px, then to 860px, then to 740px, then mobile styles kick in which don't need the wider block rules.

Below is a wider block with 1200 pixel wide image whose width reduces in stages until it has a flexible width on smaller devices (and is eventually full-width by using paragraph class="w", otherwise it keeps its side margins):

The rules for images apply even within the wider block, so the image only becomes full-width when the 'mobile' stylesheet says so (max-width: 640px). The rounded corners on images class="rc" apply only for min-width: 798px (desktop styles).

On this website the breakpoints are generally calculated to kick-in when the side margins get to less than 20 pixels (looks better than right to edge).

The CSS:

/* WIDER BLOCKS */
/* ================================================== */
/* Wider blocks in 740px column must have negative left margins */

.w1200 {
  position: relative;
  text-align: center;
}

/* 1200 + 20 side margins + 17 scrollbar allowance */
@media screen and (min-width: 1257px) {

  .w1200 {
    width: 1200px;
    margin-left: -230px;
  }

  .w1200 video {
    max-width: 1200px;
  }

}

/* 1024 + 20 side margins + 17 scrollbar allowance */
@media screen and (max-width: 1256px) and (min-width: 1081px) {

  .w1200 {
    width: 1024px;
    margin-left: -142px;
  }

  .w1200 video {
    max-width: 1024px;
  }

}

/* 860 + 20 side margins + 17 scrollbar allowance */
@media screen and (max-width: 1080px) and (min-width: 917px) {

  .w1200 {
    width: 860px;
    margin-left: -60px;
  }

  .w1200 video {
    max-width: 860px;
  }

}

/* Above 740 + 20 side margins + 17 scrollbar allowance (797) */
@media screen and (max-width: 916px) and (min-width: 798px) {

  .w1200 video {
    max-width: 740px;
  }

}

/* Less than 798 (mobile devices) */
@media screen and (max-width: 797px) {

  element {
    width: 100%;
    max-width: 740px; /* Or whatever */
  }

}

#content .w1200 img { /* Centre images */
  margin-right: auto;
  margin-left: auto;
  width: auto;
}

Slideshow

1200 pixel wide images:

The slideshow images follow the same rules as other images in div class="w1200" except that in this instance the block seems to extend full-width by adding class="bgmaxw1" to each image. The rule for the class is:

.bgmaxw1 {
  box-shadow: -640px 0px 0px 0px #ccc, 640px 0px 0px 0px #ccc;
}

The rule extends a box-shadow 640 pixels to the left and right of the images without affecting the actual width of the block.

Note: the box-shadow left and right offsets (-640 left and +640 right in this example) can't be greater than the width of the element to which they're applied, or a gap will appear between the shadow and the element.

The width of the gap will be equal to the discrepancy. So, for example, if an image with box-shadow is 600 pixels wide and the offsets are -620 left and +620 right, the gap on each side will be 20 pixels. The maximum offsets would be -600 left and +600 right, which means 1800 pixels overall and the box-shadows may not extend the full width of the screen.

Therefore only apply left and right box-shadows to elements at least one third as wide as the widest screen they are likely to be viewed on. 640 pixel wide elements seems a reasonable maximum (max. screen width 1920 pixels).

Available shades and colours

Photo by Kenneth Taylor (mid-1960s).

Note: the colours illustrated below may not be visible on narrow screens, eg: mobile phones and some tablets in portrait mode. They are aimed at wider screens.

Darkish grey #666 .bgmaxw0 / .bg00

Mid grey #ccc .bgmaxw1 / .bg01

Light grey #eee .bgmaxw2 / .bg02

Black #000 .bgmaxw3 / .bg03

Teal #9cc .bgmaxw4 / .bg04

Blue-grey #88a2b5 .bgmaxw5 / .bg05

Tan #b9a689 .bgmaxw6 / .bg06

Mauve #9d819d .bgmaxw7 / .bg07

Dark pink #c99 .bgmaxw8 / .bg08

The markup:

<p class="w bg08"><img src="img/cms-image.jpg" width="740" height="400" alt="" class="bgmaxw8"></p>

I don't like the idea of real full width images. If the window is, say, 1920 pixels wide and the image width is less, it means it's displayed larger than its 'native' size. On the other hand if the image is actually 1920 pixels wide, it will be quite a big file and much bigger than it needs to be on narrower screens. Some screens are even wider.

Technical »

Share

Page last modified: 18 October, 2020