CODEWITHSUNDEEP
csshtml
evandrobm
evandrobm

Reputation: 445

Div occupying all the space of the margin from another div

I have one content div with 960px of width and margin 0 auto (centralized), i want put one div occupying all the space of the left margin, how can i do that?

Upvotes: 1

Views: 234

Answers (2)

daveyfaherty
daveyfaherty

Reputation: 4613

Use display: table, like this:

http://jsfiddle.net/yVFzh/

<div class="wrapper">
              <div class="left-column">&nbsp;</div>
              <div class="centre"></div>
              <div class="right-column">&nbsp;</div>
            </div>​


            html,
            body{
                width:100%;
            }
            .wrapper{
                display:table;
                width:100%;
            }
            .wrapper > div{
                display: table-cell;
                background: blue;
                height:400px;
            }
            .wrapper .centre{
                width: 960px;
                background: yellow;
            }​

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

demo jsBin

  #container{
    position:relative;
    width:300px;/*change this*/
    margin:0 auto;
    height:200px;
    background:#cf5;
    padding-left:50%;
    margin-left:-150px; /*half the width*/
  }
  #centered{
    width:300px;
    height:100%;
    position:absolute;
    right:0px;
    background:#eea;
  }

HTML:

  <div id="container">  
    <div id="centered">centered</div>  
  </div>

HERE: http://jsbin.com/oluwos/3/edit is another way to do it.

Upvotes: 4

Related Questions