3 replies [Last post]
dschalle
Offline
newbie
Dresden / Germany
Last seen: 18 years 2 weeks ago
Dresden / Germany
Joined: 2004-05-05
Posts: 2
Points: 0

Hi,

I have a three column layout of my page:

left - main - right

left is float:left; width: 200px
right is floa:right; width: 200px

main is not floating, but: margin-left: 205px; margin-right: 205px
so that keeps the main area between the two floating areas and is still dynamic in size. so far so well.

If I am going to use, e.g. float:left for floating text around an image, then the how layout gets out off shape ;-(

clear:left or clear:right or clear:both is not the solution either.

Does anybod of you know, how to let a text float around an image under the described layout conditions?

Thx!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 28 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Floating between two other float areas

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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dschalle
Offline
newbie
Dresden / Germany
Last seen: 18 years 2 weeks ago
Dresden / Germany
Joined: 2004-05-05
Posts: 2
Points: 0

Floating between two other float areas

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