Left-hand menu in CSS

Discussion in 'HTML' started by Kim André Akerø, Jun 4, 2004.

  1. I'm in the process of making my first table-free website, but I've run into
    a problem with the CSS. To be more specific, it has to do with the use of
    floating <div>s and other content.

    Take a look at this page (I've used this page as an example due to the
    amount of text I've already written for it):
    http://www.drittmaskin.com/personvern.php

    Once the text in the contents area passes the left-hand floating menu, it
    jumps to the far left, making the page look broken up and all bad.

    As you can see by the source code, the text itself is contained within a
    <div> with the id named "contents".

    Any bright ideas how to make the contents line up perfectly on the left-hand
    side? Don't worry about blank space below the left-hand menu, as I'll be
    adding more to that menu later (username listings, latest articles, etc.)

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
    Kim André Akerø, Jun 4, 2004
    #1
    1. Advertising

  2. Quoth the raven Kim André Akerø:

    > I'm in the process of making my first table-free website, but I've run into
    > a problem with the CSS. To be more specific, it has to do with the use of
    > floating <div>s and other content.


    Perhaps this template I made for a friend will help. The colors and
    borders were for illustration.
    http://home.rochester.rr.com/bshagnasty/twocolumn.html

    Lots of other good templates available here as well.
    http://nemesis1.f2o.org/templates.php

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Jun 4, 2004
    #2
    1. Advertising

  3. Kim André Akerø

    rf Guest

    "Kim André Akerø" <> wrote in message
    news:40c091a8$1@proxy....
    > I'm in the process of making my first table-free website, but I've run

    into
    > a problem with the CSS. To be more specific, it has to do with the use of
    > floating <div>s and other content.
    >
    > Take a look at this page (I've used this page as an example due to the
    > amount of text I've already written for it):
    > http://www.drittmaskin.com/personvern.php
    >
    > Once the text in the contents area passes the left-hand floating menu, it
    > jumps to the far left, making the page look broken up and all bad.
    >
    > As you can see by the source code, the text itself is contained within a
    > <div> with the id named "contents".


    Don't even need to look. Add margin-left: whatever to your #contents rule,
    where whatever is the width of the nav bar div.

    Cheers
    Richard.
    rf, Jun 5, 2004
    #3
  4. "Beauregard T. Shagnasty" <> skrev i melding
    news:8P2wc.52155$...
    > Quoth the raven Kim André Akerø:
    >
    > > I'm in the process of making my first table-free website, but I've run

    into
    > > a problem with the CSS. To be more specific, it has to do with the use

    of
    > > floating <div>s and other content.

    >
    > Perhaps this template I made for a friend will help. The colors and
    > borders were for illustration.
    > http://home.rochester.rr.com/bshagnasty/twocolumn.html


    I've tried the "float: right" approach, but it just ends up looking like
    crap. I don't even know what to do with the width, since the left menu is
    100-110pt wide while the contents is supposed to fill the rest of the
    browser width (no matter what screen resolution you have). Meaning, the
    <div> with the id "contents" can't have the width parameter set (neither pt,
    em or % will help in this case).

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
    Kim André Akerø, Jun 6, 2004
    #4
  5. "rf" <> skrev i melding
    news:95dwc.6628$...
    >
    > "Kim André Akerø" <> wrote in message
    > news:40c091a8$1@proxy....
    > > I'm in the process of making my first table-free website, but I've run

    > into
    > > a problem with the CSS. To be more specific, it has to do with the use

    of
    > > floating <div>s and other content.
    > >
    > > Take a look at this page (I've used this page as an example due to the
    > > amount of text I've already written for it):
    > > http://www.drittmaskin.com/personvern.php
    > >
    > > Once the text in the contents area passes the left-hand floating menu,

    it
    > > jumps to the far left, making the page look broken up and all bad.
    > >
    > > As you can see by the source code, the text itself is contained within a
    > > <div> with the id named "contents".

    >
    > Don't even need to look. Add margin-left: whatever to your #contents rule,
    > where whatever is the width of the nav bar div.


    The CSS now contains this line:
    #contents { display: block; margin-left: 130pt; }

    It still isn't quite right. Click the link above again, it should reflect
    the changes I just did.

    The text starting below the area of the left menu is about 2-3pt to the left
    of the above text (in my browser starting with the text "Dine
    kontoopplysninger vil bli holdt skjult...").

    Now what?

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
    Kim André Akerø, Jun 6, 2004
    #5
  6. Kim André Akerø

    Kathy Guest

    Kathy, Jun 7, 2004
    #6
  7. Kim André Akerø

    Whitecrest Guest

    In article <8d2xc.980$>,
    says...
    > > http://home.rochester.rr.com/bshagnasty/twocolumn.html

    > Any workaround for what happens when the window width is narrowed to 700
    > pixels or less in IE?
    > http://home.midsouth.rr.com/notmychild/screenshots/twocolumn1.gif
    > http://home.midsouth.rr.com/notmychild/screenshots/twocolumn2.gif


    Nope, fluid (in the minds of many) seems to mean that it just falls
    apart at a smaller width than non fluid. I personally see no difference
    in having it fall apart at 500px, 700px, 800px, or what ever width.

    It should be called "kinda-fluid" design, or "fluid for a while" design
    (it also falls apart in mozilla)

    --
    Whitecrest Entertainment
    www.whitecrestent.com
    Whitecrest, Jun 7, 2004
    #7
  8. Quoth the raven Kathy:

    > Any workaround for what happens when the window width is narrowed to 700
    > pixels or less in IE?


    Nope, can't say as I do. Works fine until text size gets quite large.
    Maybe I'll have a look at it sometime later.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Jun 7, 2004
    #8
    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. Bosconian
    Replies:
    1
    Views:
    1,380
    Bosconian
    May 9, 2006
  2. It's me
    Replies:
    45
    Views:
    1,120
    Peter Hansen
    Dec 10, 2004
  3. =?Utf-8?B?YnJ1bm8=?=

    Left and Right hand splitting and resizing

    =?Utf-8?B?YnJ1bm8=?=, Sep 15, 2006, in forum: ASP .Net
    Replies:
    5
    Views:
    4,157
    Walter Wang [MSFT]
    Sep 21, 2006
  4. Simon

    Outlook style left hand menu bar

    Simon, May 30, 2007, in forum: ASP .Net
    Replies:
    1
    Views:
    697
    bruce barker
    May 30, 2007
  5. s88
    Replies:
    3
    Views:
    1,050
    Jim Langston
    Sep 23, 2010
Loading...

Share This Page