Floating between two other float areas

Hi

You could do this:

div floated left
contains div floated left (left image) and div floated right (content)
div floated right (right image)

Or, use an alternative method of placing the images left and right that doesn't use floats.

This example page shows boxes, but if you look at the code for the middle row of either of the two big boxes you will see that they are an image to the left and one to the right, but no floats:

[edit: new address]

http://209.216.241.33/threeDbox.html

Trevor

If I understand your question correctly, try a main-child div to help constrain floats in the main like this:

_____ ______________________________ _____
| L | | Main                       | | R | 
|   | | __________________________ | |   |
|   | | |Main-child       ______ | | |   |
|   | | |                 |Flo | | | |   |
|   | | |                 |__at| | | |   |
|   | | |                        | | |   |
|   | | |________________________| | |   |
|___| |____________________________| |___|

Remember if you have rigid content that is wider than the containing div, it is going to grow and whack your design.

If you are looking for a smorgasbord of 3-column designs, look at http://css-discuss.incutio.com/?page=ThreeColumnLayouts for robust examples ranging from hacked and javascripted monsters to very elegant and simple.

DE

by child do you mean this?

<div id="main">
   <div id="main-id">
       <div id="pic-left">
          <img ....></img>
       </div>
       Text floating around the image.
    </div>
</div>

Daniel