Need help with divs and floats please

[dmwhipp]

Here is my sample page: http://www.flimpact.org/fsbp/participation.html

I need to somehow float the top right image so all the content below it moves up, removing the blank white space. I've been testing putting all the content below into divs also, but still end up with a mess due to my unfamiliarity with divs and floating.

Any help would be greatly appreciated.
Thanks,
Deborah

[dmwhipp]

Since my brain was about to explode, I simply set the page up with tables and made the top left image a background, then added breaks in the text so it wouldn't be superimposed over the image. I'd really like to learn how to set this page up with divs, if possible.
Thanks,
Deborah

[Beverleyh]

When you migrate to divs, it tends to be easiest to work from the outside and come inwards. So, go back to the drawing board (literally) and begin by sketching out all of the 'blocks' (where different elements/chunks of info go) on paper and then start preparing div markup + associated CSS for that div, as you go. Just widths, padding, margin and floats for now.

Seeing where your divs are will help, and i find that setting a background colour is more convenient than using a 1px coloured border (unless you actually plan on using a border) because the accumulation of all those extra pixels borders (namely the left/right ones) will throw widths off once you've removed them all from your final layout, and then you'll end up tweaking things again to pick up the deficit.

If you're working from an existing table based design (which you are in this case) it helps to turn borders back on which you visualise where all your current 'blocks' (ie - cells) are.

Also, for the time being, you might find it easier to work in fixed widths - 960px being a good outermost width because its easily divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16... Then again, you could start with a straight 1000px width just to conveniently work with percentages on inner divs. Not that it matters when your working with percentages, but you need to start somewhere right? And 1000px is a good number to start with.

Here is an easy tutorial for a 2 column layout : http://www.456bereastreet.com/lab/de...slayout/2-col/
And from that tutorial, there is a 3 column layout one to try too : http://www.456bereastreet.com/archiv...yout_with_css/

Hope this helps and good luck with your conversion!

[dmwhipp]

Thanks Beverly... very useful information. I'm using more and more divs in my site designs trying to prepare to transition clients over to HTML5, but since I can do tables in my sleep and their sites are all meeting or exceeding expectations, I'm not rushing.

Can I ask a question about the site in question? This page currently displays exactly how the client wants it to display: http://www.flimpact.org/fsbp/participation.html
Do you see a simple way using divs to make it so the top right photo could appear without the text being superimposed over it? I was able to do a sample page using divs with 3 columns, but then the text didn't display beneath the top right photo and when I used 2 divs, the text appeared over the photo.

Thanks again,
Deborah

[Beverleyh]

You dont always need to use divs - in this example, using float:right on the standard img tag should make the text flow around it - eg: http://fofwebdesign.co.uk/about.php

[Beverleyh]

Just in case you'd like know, the td which contains the grey block with Breakfast in the Classroom / Grab and Go / Second Chance Breakfast, is defaulting to valign="middle", which looks a little strange on iPad/iPhone (portrait orientation), so adding a valign="top" in there would help things along visually.

[dmwhipp]

Thanks for the quick response, all your advice and the visual example. Much appreciated. BTW, love your website.
Deborah

[dmwhipp]

Hi Beverly,
I added the float:right style to the image on a test page, but still have the problem of the table below being pushed down: http://www.flimpact.org/fsbp/participation2.html

This is exactly what the client wants the page to look like: http://www.flimpact.org/fsbp/participation.html. I'm just not sure how to achieve it in a better way.
Thanks,
Deborah

[Beverleyh]

Hi again,

Ok, so your table cell ends directly under the image, but its height is greater than the text alongside, so its causing the gap (not enough filler).

The grid-like nature of the table is restricting your options, but the fact that you have a fixed 960px width could be a good thing here - we can use it - it isn't going to expand/contract so we can pretty much manipulate the text inside how we want.

So how about doing what you already did with your image set in the background, and then to counteract the text overlap, confine the text in a div that is about 700px wide (just the intro part). Either that or put a 260px padding on the right side of the cell so the text doesnt flow over the background image.

With the table cell underneath, I think you'll be able to set specific widths on the top few list items so they stop before they reach the image.

I know its not ideal, but there's no easy fix without totally rethinking/recoding your layout/template structure.

Hope that helps