CODEWITHSUNDEEP
htmlcss
Beginner
Beginner

Reputation: 5467

Position at left border of fixed width auto margin

I have a centered page:

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

This creates a centered layout like this:

<-- auto --><-----------------    800px    -----------------><-- auto -->

Now I would like to attach two small divs with menu items to the left and right of the page:

<-- auto --><-----------------    800px    -----------------><-- auto -->
            <div class="is-left"/>     <div class="is-right"/>

The divs are supposed to stay on top of the content:

#is-left {
    fixed; 
    top: 0; 
    left: 0; 
}

Before adding the margin auto, it was easy to position the two divs using left:0 and right:0.

How can I position the divs at the left and right border of the fixed width page?

Upvotes: 1

Views: 746

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Since your DIVs have fixed position, you'll need to use CSS calc() to position them:

div.is-left {
  left: calc(50% - 400px);
}

div.is-right {
  right: calc(50% - 400px);
}

Example Fiddle

Upvotes: 1

Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Using flexbox is the best way nowadays. Check my example here: http://codepen.io/tomekbuszewski/pen/LGdRLa

I am creating two boxes both 50% width of parent element. Flexbox takes care of placing them next to each other.

#page-wrap {
    display: flex;
    width: 800px;
    margin: auto;
}

.block {
    height: 200px;
    width: 50%;
}

-- edit --

Don't position: absolute of position: fixed for simple layout positioning, there are other, proper tools for that ;-)

Upvotes: 2

Related Questions