CODEWITHSUNDEEP
htmlcss
spinners
spinners

Reputation: 2689

CSS negative margins, what am I doing wrong?

I'm trying to achieve a 1 column flexible / 1 column fixed layout. 'col-a' should be flexible, taking up 100% - 110px, 'col-b' should be fixed and aligned right.

I' trying to use negative margins but having little luck.

<div class="cont">

    <div class="col-a">
    Be flexible 
    </div>

    <div class="col-b">
    Be fixed
    </div>

</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.cont {
background-color: #00f;
padding: 10px;
overflow:hidden;
}

.col-a {
background-color: #0ff;
padding-right: 110px;
margin-right: -110px;
float: left;
}

.col-b {
background-color: #ff0;
width: 110px;
float: left;
}

Can it be done using just this mark-up? /*Answer found */ Here is the solution 

.cont {
  background-color: #00f;
  overflow:hidden;
  padding: 10px;
}

.col-a {
  width: 100%;
  background-color: #0ff;
  margin-right: -110px;
  float: left;
}

.col-b {
  background-color: #ff0;
  width: 110px;
  float: right;
}

Upvotes: 0

Views: 151

Answers (2)

J. Tanner
J. Tanner

Reputation: 575

How about something like this, then.

<style type="text/css"> 
     .cont{position:relative;}
     .col-a{
             border:1px solid #0000ff;
             width:auto;
             margin:0,110,0,0;
           } 
     .col-b{
             border:1px solid #ff0000;
             width:110px;
             float:right;
             top:0;
             position:absolute;
             margin:0,0,0,-110
     } 
</style> 
<div class="cont"> 
    <div class="col-a">Be flexible</div> 
    <div class="col-b">Be fixed</div> 
</div>

Upvotes: 0

Axel
Axel

Reputation: 10772

I wouldn't use a negative margin for this.

This is how I would set it up.

  1. Set your column parent container to position relative.
  2. Set your column A to have a padding-right of 110px (to make space for Column B)
  3. Set your column B to be absolutely positioned to the top, right with a fixed width of 110px.

This will allow your Column A to expand 100% horizontally, while leaving space on the right for Column B.

Here's an example of what I outlined above: http://jsfiddle.net/NPn8d/

Upvotes: 1

Related Questions