Question

I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it’s width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111

get’s preformatted for some odd reason.

The code:

<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
    <div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
    <div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
    <div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>

Answer 1

I recommend using two divs floated.

On the right one, place the middle and the right divs.

All that is done via floats:

HTML:

<div class="left">content for the left</div>
<div class="rightContainer">
  <div class="right">right content</div>
  <div class="middle">middle content</div>
</div>

CSS:

.left {
    float: left;
    width: 100px;
    overflow: hidden;
    min-height: 30px;
    background: red;
}
.rightContainer {
    float: none;
    min-height: 30px;
    overflow: hidden;
    background: yellow;
}
.right {
    float: right;
    width: 100px;
    overflow: hidden;
    min-height: 30px;
    background: blue;
}​
.middle {
    overflow: hidden;
    min-height: 30px;
    background: green;
}

example:

UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/