CSS Newbie Needs Help With Div Alignment

Discussion in 'HTML & Website Design' started by vansterdam, Jan 23, 2010.

  1. #1
    I've been spending a while on a problem with div alignment. I have several divs aligned horizontally. In Firefox sometimes when the page loads some of those divs get pushed onto a 2nd line. I've been looking everywhere for a solution to a problem but nothing seems to be working.

    Here is the url: http://www.cashbackrewardcreditcards.net/creditcard-sitemap.php

    The feature cards and footer links are the ones causing problems.

    I would be very appreciate if someone could help me. This is my first attempt at a tableless css design and it's causing some frustration.

    Thanks!
     
    vansterdam, Jan 23, 2010 IP
  2. vansterdam

    vansterdam Notable Member

    Messages:
    3,145
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    245
    #2
    Anybody willing to do it for $5? It's probably a pretty easy fix. I just don't know what I'm doing with css. I probably just need an extra div property or an extra layer of div nesting. It's wasting too much of my time though.
     
    vansterdam, Jan 24, 2010 IP
  3. m7md_cis

    m7md_cis Peon

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Add height to (div) which is before (div) which pushed to second line.
     
    m7md_cis, Jan 24, 2010 IP
  4. vansterdam

    vansterdam Notable Member

    Messages:
    3,145
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    245
    #4
    Thanks for the tip. I tried making sure all related divs had a height. It doesn't seem to work.

    Anybody have any ideas?
     
    vansterdam, Jan 24, 2010 IP
  5. Maz991

    Maz991 Member

    Messages:
    78
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    Hm, have you tried making a div container around these horizontal divs?
     
    Maz991, Jan 24, 2010 IP
  6. vansterdam

    vansterdam Notable Member

    Messages:
    3,145
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    245
    #6
    Yes, even tried 2 containers. Thanks though.
     
    vansterdam, Jan 24, 2010 IP
  7. blacksheep666

    blacksheep666 Active Member

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #7
    
       <div style="width:500px; float:right">text here</div>
       <div style="clear:both"></div>
    
    HTML:
    Try this... You can also specify the width of the container (500px)
     
    blacksheep666, Jan 24, 2010 IP
  8. vansterdam

    vansterdam Notable Member

    Messages:
    3,145
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    245
    #8
    I believe I have all widths properly specified. I tried adding these properties but it didn't seem to do anything.

    Would you be willing to take a shot at fixing it if I supply ftp access?
     
    vansterdam, Jan 25, 2010 IP
  9. webspinnerhires

    webspinnerhires Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    If you are still facing this issue IM
    webspinnerhires[at]yahoo[dot]com .
     
    webspinnerhires, Jan 25, 2010 IP
  10. vansterdam

    vansterdam Notable Member

    Messages:
    3,145
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    245
    #10
    Doh the issue was simply that I had to use float:left; for all divs in the row. I think I tried that before but it wasn't working due to the display type.

    Thanks for all your help.
     
    vansterdam, Jan 26, 2010 IP
  11. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #11
    You have several problems with your CSS. Validate for that list.
     
    drhowarddrfine, Jan 27, 2010 IP
  12. hdesigns

    hdesigns Peon

    Messages:
    89
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    The problem with div alignments is that it can look great on your computer but for those that have bigger screen div does not align them well... I would try to stay away from coding with div tables..
     
    hdesigns, Jan 27, 2010 IP