Question

First, here’s is my rough example: http://demindu.com/sandbox/simple.html

What I’m trying to do:

Create a content div: let’s say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.

The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don’t know enough to know if this is even possible.

The amount of blank space above and below the middle section would need to be:
window.innerHeight – height of the div (in this example: 500px [400px box with two 50px margins]) / 2

The blank space to the left of the black bar would need to be:
window.innerWidth – width of the div (in this example: 800px [700px box with two 50px margins]) / 2

My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?

Answer 1

You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:

1. The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it’s taken care of by the height.)

2. The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you’ve chosen. We can also set the height and padding on this object and the parent will inherit it’s height. Don’t use margins to simulate padding – it can cause cross browser issues when you’re just trying to do some positioning tricks as we are here.

So your HTML code would look something like this:

    <div id="my_centered_design">
        <div id="my_centered_design_content">
            <p>This is just some example text.</p>
        </div>
    </div>

And you’re CSS would look like this:

    div#my_centered_design {
      background: #000;
      margin-left: -400px;
      margin-top: -250px;
      left: 50%;
      position: absolute;
      right: 0;
      top: 50%;
   }

   div#my_centered_design_content {
      background: #333;
      height: 400px;
      /* I think you actually want padding for 
         the effect you're trying to accomplish */
      padding: 50px;
      width: 700px;
   }

Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.