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%;
}

The HTML:

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

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 */
}

The HTML:

<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>
</div>
<p>...and here is some more body content.</p>
</div>

Want to work with us?

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?

info@citywebconsultants.co.uk

 

Or give us a call?

+44 (0) 191 906 7746

 

Playing hard to get? We'll contact you