Question

My html code is

<div style="border:1px solid red; height:140px;">
    <div style="width:100px; float:left; border:1px solid blue;">
        left
    </div>
    <div style="width:100px;  float:right; border:1px solid blue; ">
        right
    </div>
    <div style="border:5px solid green;">
        middle
    </div>
</div>

Why does the green border spreads to the 100% of width and covers left and right divs? How to fix it so it covers the only block that starts with the word “middle” and ends right before the word “right”?
Just tried position:relative; but it didn’t help.

The example of the code is here:
jsFiddle

Answer 1

Write overflow:hidden to it.

<div style="border:5px solid green;overflow: hidden;">
            middle
</div>

Check this http://jsfiddle.net/A6qWE/1/