I need help on my web design!

Discussion in 'HTML & Website Design' started by haiko, May 6, 2009.

  1. #1
    hi i am making a template for DataLif CMS bu i am having a problem. My layout is 3 columns. the right and left column are good but the middle is all messed up in internet explorer 6 and 7 only.

    WHAT CAN I DO?
    Please tell me
    the design works great on firefox, safari, and ie8

    screenshot in attachment.

    css is:


    .left {
    float: left;
    padding: 0px 10px 0px 0px;
    width: 197;
    }

    .middle {
    top: 10px;
    margin-left: 200px;
    margin-right: 189px;
    width: 615px;
    float:none;

    max-width: 618px;
    }

    .right {
    float: right;
    padding: 0px 0px 0px 10px;
    width: 189px;
    }



    ----------------------------------------
    WHats wrong!
     

    Attached Files:

    haiko, May 6, 2009 IP
  2. diwebdesign uk

    diwebdesign uk Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try floating the middle column left. Do you have a link to see it online? You may need to reduce your margins too otherwise the width may be too much.
     
    diwebdesign uk, May 7, 2009 IP
  3. Progg

    Progg Peon

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I agree with diwebdesign,

    usually you should do a display: block and float: left to get everything pressing up against each other and floated the same way. if you have three columns in a container they should all have a width set and then floated left
     
    Progg, May 7, 2009 IP
  4. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    In most cases, when you're working with three columns, you do the following:

    1. Create a container that equals the full width of your three columns, including the space between.
    2. You float the left column to the left.
    3. You float the middle column to the left and add a left margin to space it from the left column.
    4. You float the right column to the right.
     
    steelfrog, May 7, 2009 IP
  5. haiko

    haiko Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    i am not that good so can someone tell me how to float the middle column to the left and think link to my site is http://lavna.com
     
    haiko, May 7, 2009 IP
  6. Progg

    Progg Peon

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    assign an ID to each column. For example

    <div id="container">
    <div id="col_left></div>
    <div id="col_middle></div>
    <div id="col_right></div>
    </div>

    then your respective CSS will be
    #col_left {
    display: block;
    float: left;
    }
    #col_middle {
    display: block;
    float: left;
    }
    #col_right {
    display: block;
    float: right;
    }
    This excludes all other CSS parameters that will be required like width
     
    Progg, May 7, 2009 IP
  7. haiko

    haiko Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    @Progg
    the code you just gave me does not work
    can you give me a css code that has the left column as 197 px, the middle as 615 px and the right as 189 px
    please
     
    haiko, May 7, 2009 IP