Results 1 to 9 of 9

Thread: Need help with divs and floats please

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    191
    Thanks
    41
    Thanked 1 Time in 1 Post

    Default Need help with divs and floats please

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    191
    Thanks
    41
    Thanked 1 Time in 1 Post

    Default

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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!
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    191
    Thanks
    41
    Thanked 1 Time in 1 Post

    Default

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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.
    Last edited by Beverleyh; 02-03-2013 at 07:21 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    dmwhipp (02-03-2013)

  8. #7
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    191
    Thanks
    41
    Thanked 1 Time in 1 Post

    Default

    Thanks for the quick response, all your advice and the visual example. Much appreciated. BTW, love your website.
    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  9. #8
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    191
    Thanks
    41
    Thanked 1 Time in 1 Post

    Default

    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
    Last edited by dmwhipp; 02-04-2013 at 04:49 PM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  10. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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
    Last edited by Beverleyh; 02-04-2013 at 06:22 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Floating Menu Script - floats off page
    By northyukon in forum JavaScript
    Replies: 5
    Last Post: 02-06-2010, 07:12 PM
  2. IE is ignoring floats on my gallery page
    By jbinoculars in forum CSS
    Replies: 1
    Last Post: 04-28-2009, 11:25 PM
  3. opposing floats
    By fodo in forum CSS
    Replies: 12
    Last Post: 02-12-2009, 04:16 PM
  4. Layout with floats
    By froggy in forum CSS
    Replies: 8
    Last Post: 11-17-2008, 09:14 PM
  5. div collapses when i add floats
    By 4bidden in forum CSS
    Replies: 2
    Last Post: 11-22-2006, 11:59 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •