Problem with 2 column layout

Discussion in 'CSS' started by kyllle, Jul 7, 2008.

  1. #1
    Hi all,

    Iv started working on my first css site and have encontered a problem taht I judt dont know how to fix, its kinda strange to me but Im sure someone will find it a simple problem. Iv attached a jpg of my proposed layout and the link below is what Iv managed to come up with. When looking at the link you will see the columns are messed up (left column on top, right colomn on bottom) I hd this layout fixed when I had teh font family as Century Gothic, Verdana, Arial... but since Iv decided to use Arial instead of teh Century Gothic and Verdana thats when teh columns start playing up?? Can anyone please offer me any advice on how to solve this problem? and if you find any other areas I coul dwork on that would be great also.

    Thanks for looking Smiling

    Kyle
    www***DOT***glen-lodge.co.uk/quilly/quilly.html
     

    Attached Files:

    • lay.jpg
      lay.jpg
      File size:
      48.7 KB
      Views:
      63
    kyllle, Jul 7, 2008 IP
  2. Rubenator

    Rubenator Peon

    Messages:
    40
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your attachment can't be viewed, but I use the link below your name and found it. Well, let me start saying that Century Gothic isn't a cross-platform font. You should stick to those fonts that are proven to be cross-platform secure like Arial, Verdana, Helvetica, Trebuchet, Georgia, Times, Times New Roman, etc.

    Take a look at one of the massive articles about generic font families:
    http://www.oreillynet.com/pub/a/javascript/2001/07/26/css_fonts.html?page=last
     
    Rubenator, Jul 7, 2008 IP
  3. rebelagent

    rebelagent Well-Known Member

    Messages:
    876
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    165
    #3
    You need to align the right columns to the top via html or css

    CSS=
    valign: top;

    HTML =
    valign="top"

    The table it's in needs to be set for that along with the individual cells. I would need to see code to see exactly how you coded but it's okay, with some knowledge you can probably figure this out from what I said.
     
    rebelagent, Jul 10, 2008 IP
  4. blktallos

    blktallos Active Member

    Messages:
    314
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #4
    They are not using tables? so i dont know what your talking about? I think the reason why your columns are messing up because the size of your font or the font can change the length or the height of the div.


    text-align:top;
    HTML:
     
    blktallos, Jul 11, 2008 IP