Position:fixed header in 3 col layout?

Discussion in 'HTML' started by Bo, Jul 26, 2009.

  1. Bo

    Bo Guest

    How can make the header position:fixed in the code below? If I add it to the
    header div it moves to the right and messes up the layout in IE7. Is it
    possible to have a 3 col layout with position:fixed header somehow?

    <style type='text/css'>

    ..wrapper{
    margin: 0px auto;
    width: 986px;
    background-color: #ffffff
    }
    ..header{
    float: left;
    width: 986px;
    height: 114px;
    }
    ..contents{
    background-color:#ffffff;
    float:left;
    width:986px;
    }
    ..left1{
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    width: 180px;
    background-color: #ffffff
    }
    ..left2{
    float: left;
    margin-right: 20px;
    margin-top: 20px;
    width: 606px;
    background-color: #ffffff
    }
    ..right{
    float: right;
    margin-top: 20px;
    width: 160px;
    background-color: #ffffff
    }
    ..footer{
    float: left;
    width: 100%;
    }

    body {
    padding: 0px;
    margin: 0px;
    background-attachment: fixed;
    background-color: #7F7F7F;
    background-image: url(/layout/bg_grey.png);
    background-repeat: repeat-x;
    background-position: left top;
    min-width:986px;

    }
    </style>
     
    Bo, Jul 26, 2009
    #1
    1. Advertising

  2. Bo

    dorayme Guest

    In article <4a6c12c7$0$48235$>,
    "Bo" <> wrote:

    > How can make the header position:fixed in the code below?


    Supply a URL

    --
    dorayme
     
    dorayme, Jul 26, 2009
    #2
    1. Advertising

  3. Bo

    John Hosking Guest

    On Sun, 26 Jul 2009 10:24:30 +0200, Bo wrote:

    > How can make the header position:fixed in the code below?


    position:fixed;

    > If I add it to the
    > header div it moves to the right and messes up the layout in IE7.


    To the right of what?
    Only in IE7? No other browser?

    > Is it
    > possible to have a 3 col layout with position:fixed header somehow?


    Yes.

    >
    > <style type='text/css'>


    Post a URL, not (some disconnected) code.

    > .header{
    > float: left;


    If 'position' has the value 'absolute' or 'fixed', the box is absolutely
    positioned, the computed value of 'float' is 'none', and display is set
    according to the table below. The position of the box will be determined by
    the 'top', 'right', 'bottom' and 'left' properties and the box's containing
    block.
    - http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo


    --
    John
    On Usenet, you can get an answer to any question you ask.
    You just need to ask the right questions.
     
    John Hosking, Jul 26, 2009
    #3
  4. Bo

    Bo Guest

    Bo, Jul 26, 2009
    #4
  5. Bo

    dorayme Guest

    In article <4a6c8cba$0$48244$>,
    "Bo" <> wrote:

    > "dorayme" <> skrev i meddelelsen
    > news:...
    > > In article <4a6c12c7$0$48235$>,
    > > "Bo" <> wrote:
    > >
    > >> How can make the header position:fixed in the code below?

    > >
    > > Supply a URL

    >
    > http://digitalt.host22.com/test1.htm header above and centered in IE8,
    > latest firefox and Chrome.
    >
    > Screenshots
    > IE7 http://img258.imageshack.us/img258/9611/testie7.jpg
    > IE8 (Firefox/Chrome latest)
    > http://img258.imageshack.us/img258/7451/testie8m.jpg


    I can't test on IE7 (or 8) just now but why have you got float left on
    the header?

    --
    dorayme
     
    dorayme, Jul 26, 2009
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    624
    John Timney \(MVP\)
    Jun 19, 2006
  2. gmax2006
    Replies:
    1
    Views:
    452
    Andy Dingley
    Jul 18, 2006
  3. Replies:
    11
    Views:
    825
    richard
    Sep 29, 2006
  4. Bo
    Replies:
    2
    Views:
    484
    richard
    Jul 25, 2009
  5. Replies:
    8
    Views:
    229
    Eric Sosman
    Apr 20, 2013
Loading...

Share This Page