Position h1 and drop down list in one row

Discussion in 'CSS' started by fhirzall, May 10, 2006.

0
  1. #1
    Hey everyone, I'm trying to position a header and a drop down list like this...
    header dropdownlist

    ...and i want them to line up correctly, I tried putting them in a Div and just floating the header left and the dropdownlist right, but they don't line up correctly in firefox. Any ideas? Would I be better off just using a table with 2 cells?
    Thanks!
     
    fhirzall, May 10, 2006 IP
  2. skimmy

    skimmy Peon

    Messages:
    138
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I tend to be a big fan of tables myself... I feel that it makes it much easier to make websites cross-browser compatible.
     
    skimmy, May 10, 2006 IP
  3. fhirzall

    fhirzall Guest

    Messages:
    124
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah, I agree, I don't think browsers are ready for complete CSS websites yet, but it just seems wrong for me to make a small table with one row to make a header and drop down list align together when most of my other stuff is CSS.
     
    fhirzall, May 10, 2006 IP
  4. iceberg

    iceberg Notable Member

    Messages:
    1,751
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    200
    #4
    Try this...

    #nav {
    margin: 0px auto;
    border: 0px none;
    padding: 0;
    text-align: center;
    }
    and then put header & dropdownlist within the nav
    #header {
    margin: 0;
    padding: 0;
    float: left;
    }
    #dropdownlist {
    margin: 0;
    padding: 0;
    float: right;
    }

    the total width(header+dropdownlist) mustnot be greater than the width of nav.

    then put it in the body
    <div id="nav">
    <div id="header">
    </div>
    <div id="dropdownlist">
    </div>
    </div> <!-- nav closed -->

    It works with fixed width. It''ll be better if you mention the width in the code.

    hope this'll work ..:)
     
    iceberg, May 10, 2006 IP
  5. fhirzall

    fhirzall Guest

    Messages:
    124
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5

    Thanks for the help iceberg, unfortunately that didn't work, it looked okay in IE, but then the element under it went right on top of the div.header in Firefox, a few line breaks push it down under. I'm coding this in asp.net so I have a feeling its the markup generated by .net that's messing this up. Thanks for the help, i'll try to figure it out later, 27 hours sitting at my computer isn't helping me solve any problems :).
     
    fhirzall, May 10, 2006 IP