Question

My website looks like this:

[left div][          center div         ][right div]
          [                             ][right div]
          [                             ]
          [                             ]
          [                             ]
          [                             ]

If I try to add another div to the left it looks like this:

[left div]
[        ]
[left div][          center div         ][right div]
[        ][                             ][right div]
[        ][                             ]

My css:

    #left{
    width: 140px;
    height: auto;
    float: left;
    clear: left;
    }

    #center{
    float: left;
    width:600px;
    padding: 10px;
    }

    #right {
    float: right;
    height: auto;
    width: 140px;
    }

How can I make it look like this

[left div][          center div         ][right div]
[        ][                             ][right div]
[left div][                             ]
[        ][                             ]
[        ][                             ]
[left div][                             ]

Answer 1

To explain the idea: You can’t use “clear:left” for the div:left here, because it will make a new line between 2 “left” div.

I think that your best bet is to create the “wrapper”: left-wrapper, center-wrapper, and right-wrapper (the same to left,right & center above). Then you can put child-div into “left-wrapper”, 100% width, without floating stuff.