Question

Here is a recreation of a problem i ran into last week.
I have 3 boxes and want to shift 2 of them left so they fit into its parent box. I can shift them successfully but CSS fully ignores that they can fit into the width and puts the last box in a new line which completely ruins the look. Here is a demo I see the problem with firefox 11 and chrome 18. How can i affect the css so the 3 boxes will fit in the line since it obviously can when doing the left shift.

The html (the second part is just to see the shift is working vs if there was no shift.)

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>


<div class="A2">
    <div class="B2"></div>
    <div class="C2"></div>
    <div class="D2"></div>
</div>

The css

.A { width: 290px; height:200px; background-color: red; }
.B, .C, .D { width: 100px; height: 100px; }
.B, .D { background-color: green;}
.C { width: 100px; background-color: blue; }
.A div { float: left; }
.C, .D { position:relative; left: -50px; }


.A2 { width: 290px; height:200px; background-color: red; }
.B2, .C2, .D2 { width: 100px; height: 100px; }
.B2, .D2 { background-color: green;}
.C2 { width: 100px; background-color: blue; }
.A2 div { float: left; }

Answer 1

If you want them all to fit on one line, you can use negative margins.

You have 10px of extra space to count for, so you might want to divide as evenly as possible, something like this ( a bit awkward with 3 elements):

.B{ margin-left: -3px; }
.C{ margin-left: -3px; }
.D{ margin-left: -4px; }

http://jsfiddle.net/M6uBk/15/

There are many other ways to do it or you can adjust these number any way so they add up to 10, it just depends on how much of which elements you want showing since it can’t possibly all fit within the container.