CSS negative margins, what am I doing wrong? - html

Question

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

Answer 1

I wouldn't use a negative margin for this.
This is how I would set it up.
Set your column parent container to position relative.
Set your column A to have a padding-right of 110px (to make space for Column B)
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/

Answer 2

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>