Go to the website www.florencehabitat.org and click on "Home Ownership." When the page displays, click on "Home Ownership" again. You will see that the picture has moved to the right of the window, as I intended. I would like the main text to appear just below the picture and fill the window. I can do this by defining a #tag in the CSS file and doing a <div id="tag">, but then the text does not flow when the window changes size. It gets truncated on the right. Do you have a suggestion on how I can fix this? Obviously I am not an experienced webmaster, but I have assumed the job of maintaining this site.

Colin Jameson

colinj@q.com

I'm not sure I understand what you mean. Do you want the whole text to start below the picture, or just continue in full width underneath it?

If the latter, it won't look good with the table width given in %. It will then be a gap of variable size according to the screen resolution that the site is viewed with. If you would set a fixed table width, like 950px or so, then you could combine the table columns so that the text would fill the space below the picture.

I have just changed the screen to show the text as I want it to appear. The problem is, if you compress the window horizontally, the text gets lost instead of rejustifying and flowing downward. Can you give me an example of how I would fix this?

Sorry, I saw now that only the top with the logo was in a table.

If you check your CSS file, 1 third down you will see this:


The 55% makes the lines of text break before they cover the whole width. Set the width to 100%, that should fix it.

BTW, you ought to clean up the html file. There are masses of redundant font code that can be removed.

Thanks for the help. I inherited the mess you refer to and plan to clean it up.

I made the change but the problem still exists. The text does not wrap when the window is made smaller horizontally. It gets truncated (and therefore lost) on the right.

Colin,

The picture is now to the left right after the Links box. See attached screenshot. From the posts you would like the photo to the right with the text wrapping around it. Does the Links box stay to the left?

I can fix this remotely and can post the changes that you will need to make to the CSS file.

Please advise.

Colin,

Setup a class in your CSS file as such: .float-right { float: right; }

Also in the CSS file: img.float-right {margin: 5px 0px 10px 10px;}

In the HTML file add this to the img tag: <img src="images/xxxx.jpg" width="40" height="40" alt="" class="float-right" /></a>

That should move the image to the right, wrap the text alongside it on the left and give you some padding around the image so the text is not up against it.

Jim:

If you see the picture to the left, you have to click on "Home Ownership" one more time to get it to move to the right. This is the page I am referring to. I did this just so I could demonstrate what I am trying to achieve. Now I need the text to fill the screen below the picture and flow downward when the screen is horizontally compressed, instread of being clipped.

Colin,

You have this code in your CSS file:
#content{
float: left;
width: 55%;
}
and you have:
#ownerblock{
float: left;
color: black;
width: 1500px;
height:200px;
padding:5 px;
}

Have you tried removing the width: 55%; and see how the page reacts?

From your description, you don't want the 55% of the ownerblock 1500px. Maybe try setting a max-width: 55%;
and see it that lets it shrink in width.