Placing an image on the main page wont align correctly

version 1.3.8a

testing on a localhost

I am trying to edit the main page via the admin panel to place an image with text wrapped around it but whenever there is no text below the image, the image flows into the section ("feature products") below.

Attachment #6051

Why does this happen? and how can i fix it?

You are going to have to upload this to a host so that we can access it

ok

here you go

uploaded it to a host and its the same no matter the template I use.

You can see that the header for the "new product for July" dont seem to see the image, and the image overlaps the header/separator. If I place enough text to fill below the image then everything looks normal, but shouldnt it format correctly even if just the image file is there?

Because you have used <p> tags you will have to correct this and/or add <br/> between para's
Then add and adjust the following entries to your stylesheet

#indexDefaultMainContent {
clear: both;
height: 370px;
}
#indexDefaultMainContent p {
float: right;
text-align: left;
width: 90px;
}

I have made the adjustments you suggested. You can see the result by clicking the link again.

here

not pretty

i have played with the number for the width, and that will fix the present problem but leaves a lot of white space on the right.

Did you add <br/> between paragraphs???

Change the following:

#indexDefaultMainContent p {
float: left;
text-align: left;
width: 360px;
}

I have tried what you suggested but still unsatisfactory result.

I am very disappointed in the editing and formating tools in this editor.

plus I dont think this home page area has been handled properly.

I would expect it to behave like a frame but it doesnt seem to.

I want to have a well defined space in which i can control the text flow, the margins, and how the text flow around images. The frame should restrict the image size so even if it is increased it should not flow outside the frame, might only display a part of the image but that's better than having it ruining the site formatting.

Can this be done?

I have discovered that many of the issues were related to the template I was using. I have found a template that handles this area a little better.

ps: adding a few <br/> at the end of the text also helped. You just have to add enough to push the text area below the bottom of the image.