Skip to main content

This is a simple and effective bit of CSS for having your content pull in from the edge of the page up until the edge of a centred container. It's quite a powerful visual effect, having the whole margin on one side be taken up by the same colour as the content container itself.

You can actually use a two-colour gradient background to achieve this, but I'm going with a method using margins which is more flexible.

For Main Content:

Have your main content area extend its margins to the edge of the page!

Full content version of this CSS

The CSS:

.main-container {
  padding: 20px; /* optional */
  margin-left: -1000%;
  padding-left: 1000%;
  background: #fff;

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 50%;


<div class="wrapper">
<div class="main-container">
<p>Main text of page... </p>

For Inline Content:

Draw attention to some sidebar style content by having it pull in from the edge in a solid colour.

Inline content version

The CSS:

.floater-inner {
  width: 180px; /* whatever width you'd like */
  float: right;
  margin: 20px; /* optional */

.floater-container {
  margin-left: 90%;
  background-color: darkblue;
  color: white;
  float: left;
  margin-left: -90%;
  width: 100%;
  margin-right: 20px; /* optional */


<div style="width: 50%; margin: 0 auto">
<p>Here's some body content...</p>
<div class="floater-container">
<div class="floater-inner">Here is your sidebar content...</div>
<p>...and here is some more body content.</p>

For more information on this topic, to ask questions, or to find out how we might be able to help you.

Please feel free to email:



Want to join our team?

Copyright © City Web Consultants Ltd. 2017. All Rights Reserved
Company number: 27234161

Want to start something?

Fantastic! We'd love to hear from you, whethere it's a pitch, an idea or just saying hello!

Feel free to get in touch.


Drop us an email?


Or give us a call?

+44 (0) 191 691 1296


Playing hard to get? We'll contact you