cross-browser right sidebar

Discussion in 'HTML' started by David Schwartz, Jun 20, 2008.

  1. I'm trying to create a sidebar of fixed width. The following code
    works in IE7 but not FF2. What's the best approach to do this in both
    of these browsers?

    <html>
    <head>
    <style>
    #right {
    float: right;
    background-color: Silver;
    height: 300px;
    width: 100px;
    margin-left: 50;
    }

    #left-1 {
    background-color: Lime;
    height: 100px;
    margin-right: 30;
    }

    #left-2 {
    background-color: Yellow;
    height: 100px;
    margin-right: 160;
    }
    </style>
    </head>
    <body>
    <div id="right">blah<br />blah<br />blah<br /></div>
    <div id="left-1">blah</div>
    <div id="left-2">blah</div>
    </body>
    </html>

    TIA,
    David
     
    David Schwartz, Jun 20, 2008
    #1
    1. Advertising

  2. David Schwartz wrote:
    > I'm trying to create a sidebar of fixed width. The following code
    > works in IE7 but not FF2. What's the best approach to do this in both
    > of these browsers?


    Better to have a URL...

    Not doctype so IE will be in quirks mode, all bets on constant rendering
    across browsers is off.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    >
    > <html>
    > <head>
    > <style>
    > #right {
    > float: right;
    > background-color: Silver;
    > height: 300px;
    > width: 100px;
    > margin-left: 50;

    ^^
    50 what, bananas?
    > }
    >
    > #left-1 {
    > background-color: Lime;
    > height: 100px;
    > margin-right: 30;

    ^^
    again 30 what?
    > }
    >
    > #left-2 {
    > background-color: Yellow;
    > height: 100px;
    > margin-right: 160;

    ^^^
    > }
    > </style>
    > </head>
    > <body>
    > <div id="right">blah<br />blah<br />blah<br /></div>

    ^^^^
    This *XHTML*? If so you are asking for more problems with MSIE...

    > <div id="left-1">blah</div>
    > <div id="left-2">blah</div>
    > </body>
    > </html>
    >
    > TIA,
    > David



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 20, 2008
    #2
    1. Advertising


  3. > Not doctype so IE will be in quirks mode, all bets on constant rendering
    > across browsers is off.
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">


    Good point!


    > 50 what, bananas?> }


    Another good point. This helped a lot, not surprisingly. However, the
    margin is relative to the side of the window rather than the 'right'
    div. How do I get the left divs to be sensitive to the position of the
    right div? FYI, there will be additional left divs below the right div
    and I'll need them to extend to the page width (minus the same
    margin).

    TIA,
    David
     
    David Schwartz, Jun 20, 2008
    #3
  4. > Make them (the left divs) overflow: auto (or hidden) so they become
    > block formatting contexts.


    I used 'overflow: auto' for the left divs and it's looking
    great in FF but not in IE7 in which the right div isn't floating at
    all but, rather, pushing the left divs down the page. Any ideas why
    that might be?

    Thanks for your help!!

    David
     
    David Schwartz, Jun 20, 2008
    #4
  5. On Jun 21, 3:00 am, Ben C <> wrote:
    > On 2008-06-20, David Schwartz <> wrote:
    >
    > >> Make them (the left divs) overflow: auto (or hidden) so they become
    > >> block formatting contexts.

    >
    > > I used 'overflow: auto' for the left divs and it's looking
    > > great in FF but not in IE7 in which the right div isn't floating at
    > > all but, rather, pushing the left divs down the page. Any ideas why
    > > that might be?

    >
    > Interesting. The spec _does_ say browsers can do that if they want, but
    > I didn't think IE did.
    >
    > But I don't know much about IE.
    >
    > CSS 2.1 9.4.1:
    >
    > In a block formatting context, each box's left outer edge touches the
    > left edge of the containing block (for right-to-left formatting, right
    > edges touch). This is true even in the presence of floats (although a
    > box's line boxes may shrink due to the floats), unless the box
    > establishes a new block formatting context (in which case the box
    > itself _may_ become narrower due to the floats).
    >
    > CSS 2.1 9.5:
    >
    > The margin box of a table, a block-level replaced element, or an
    > element in the normal flow that establishes a new block formatting
    > context [p. 126] (such as an element with 'overflow' other than
    > 'visible') must not overlap any floats in the same block formatting
    > context as the element itself. If necessary, implementations should
    > clear the said element by placing it below any preceding floats, but
    > may place it adjacent to such floats if there is sufficient space.


    So, anyone have a solution? I can't imagine I'm the first person to
    raise this issue, am I?

    David
     
    David Schwartz, Jun 21, 2008
    #5
  6. David Schwartz

    dorayme Guest

    In article
    <>,
    David Schwartz <> wrote:

    > > Not doctype so IE will be in quirks mode, all bets on constant rendering
    > > across browsers is off.
    > >
    > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">

    >
    > Good point!
    >
    >
    > > 50 what, bananas?>
    > > }

    >
    > Another good point. This helped a lot, not surprisingly. However, the
    > margin is relative to the side of the window rather than the 'right'
    > div. How do I get the left divs to be sensitive to the position of the
    > right div? FYI, there will be additional left divs below the right div
    > and I'll need them to extend to the page width (minus the same
    > margin).
    >


    Since you know the exact width of the right div, 100px, it is right
    there in your CSS, just simply add 100px to the right margin of the
    yellow div you want pushed away from the right div. Or is there some
    complexity I am missing? Are you really not meaning to have a width on
    the right float and wanting to know how to cope in that situation?

    --
    dorayme
     
    dorayme, Jun 22, 2008
    #6

  7. > Hey, dude, it looks exactly the same to me by adding a strict doctype:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > ...which should be the first/top line of the doc.


    Doesn't work for me.

    David
     
    David Schwartz, Jun 23, 2008
    #7
  8. > Since you know the exact width of the right div, 100px, it is right
    > there in your CSS, just simply add 100px to the right margin of the
    > yellow div you want pushed away from the right div. Or is there some
    > complexity I am missing? Are you really not meaning to have a width on
    > the right float and wanting to know how to cope in that situation?


    The right div is fixed width but, in the actual application, it's of
    arbitrary height (data driven) and there are a number of left divs,
    most of which will be positioned below the right div and should go to
    the window edge (minus the margin, of course).

    David
     
    David Schwartz, Jun 23, 2008
    #8
  9. David Schwartz wrote:
    >> Hey, dude, it looks exactly the same to me by adding a strict doctype:
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >>
    >> ...which should be the first/top line of the doc.

    >
    > Doesn't work for me.


    It is not the *only* thing you need to do, it is not a magic bullet, the
    rest of markup has to be correct...time for a URL...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 23, 2008
    #9
  10. On Jun 23, 1:56 pm, Neredbojias <me@http://www.neredbojias.net/_eml/
    fliam.php> wrote:
    > On 23 Jun 2008, David Schwartz <> wrote:
    >
    >
    >
    > >> Hey, dude, it looks exactly the same to me by adding a strict doctype:

    >
    > >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > >> "http://www.w3.org/TR/html4/strict.dtd">

    >
    > >> ...which should be the first/top line of the doc.

    >
    > > Doesn't work for me.

    >
    > > David

    >
    > That's weird. I copied your code from the post, pasted it as-is in a doc
    > file with .html extension, and simply added the doctype on top. It worked.
    > Perhaps your version of ff is to blame. I was using ff 2.0.0.14. If that
    > isn't it, I don't know what is.
    >
    > --
    > Neredbojiashttp://www.neredbojias.net/
    > Great sights and sounds


    Sorry for not being clear; it's IE7 that's the problem.

    I'm afraid that I don't have access to a freely available web server
    to post the page to.

    David
     
    David Schwartz, Jun 24, 2008
    #10
    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. Jeff
    Replies:
    13
    Views:
    1,149
    vanilla
    Oct 6, 2007
  2. msdngroup
    Replies:
    5
    Views:
    715
    msgroup
    Jan 30, 2008
  3. msdngroup
    Replies:
    0
    Views:
    586
    msdngroup
    Dec 15, 2007
  4. Remy Blank
    Replies:
    1
    Views:
    397
    Max M
    Jun 4, 2008
  5. Ciaran
    Replies:
    11
    Views:
    3,071
    dorayme
    Oct 8, 2009
Loading...

Share This Page