divs, float, image placement, and text wrapping

[smajors]

What is the best css method to use for floating content side by side?

For example, I want text on the left and an image on the right. So far I have tried creating a left float and right float div as well as an image that floats right and left. I have gotten the left float image to work but cannot get the right float to work.

Also, would I need to create all my content in a div and then create divs for individual items I want inside of the div? So would the text need to be in a div, then the image in a div, and those individual divs be inside of one div?

css_image_leftFloat.jpg

css_image_rightFloat.jpg

[devjoe]

Well, it looks like you have right float working in your screen shot. Be aware that right float does not put it before any other content. If you wanted the right float to appear even with the Farm Layer heading, the floating element needs to occur before the Farm Layer heading in the document.

You can float a single image, but it is more flexible to create a floating div, because then you can stuff images, text, tables, whatever inside the div. Only the div would need to be styled with your floating class; it keeps all the other content together in a box which floats where you told it to, as long as the content isn't too wide for anything else to fit beside it.

[smajors]

Thank you! I'm having another issue. I have two divs floating and in the print version it is showing correctly, however, in the web version, I can't see any thing past the first line. Is this a bug or did I format wrong?

print_float.jpg

Web version:

web_float.jpg

[NorthEast]

Your screenshots are in Flare's editor, but does it look ok in the preview or actual output?

Generally, Flare's editor doesn't display floated elements very well, so I wouldn't worry that it doesn't look right if it's only in the editor.
I actually turn off Enable object positioning, because Flare's attempts to position floats can make it harder to work in the editor.

[smajors]

Hi Dave,

Yes, it does look okay in the preview, so this must be a bug in Flare V10. I wonder if this is fixed in Flare V11? There are some other issues going on with this (see example images below).

xml_p_div.jpg

divs_image.jpg

[NorthEast]

If it looks ok in the preview or output, then don't worry about it.
I just turn off Enable object positioning in the editor, as I find it causes too many problems.

[smajors]

A related question, I've been using a float left div to place an image and text or list items side by side. I refer to this article for how to place divs side by side.

http://techwelkin.com/how-to-arrange-th ... de-by-side

However, text below is wrapping to the right of the div. I don't think I can clear right because I'm using two float left divs side by side. Should I use a float left div instead and a float right div then clear right on the float right div?

[NorthEast]

You could use float:left on both, but just use clear:right on the right-hand one.

If you're wanting a more structured layout, perhaps create a div for a 'row', which contains both your 'column' divs.
Then set clear:both on the row.

[smajors]

You could use float:left on both, but just use clear:right on the right-hand one.

If you're wanting a more structured layout, perhaps create a div for a 'row', which contains both your 'column' divs.
Then set clear:both on the row.

For the first item, I would have to have two different float left divs, with one having a clear right and the other not clearing at all.

For the second item, you're saying the column divs would be my side by side float left divs, then place them inside one big div and set the clear property on the container "holding" both divs?