CSS 2 columns (1 nav + 1 content) 100% height & 100% width

Discussion in 'HTML' started by Not4u, Feb 25, 2004.

  1. Not4u

    Not4u Guest

    Hello,
    I have a problem with CSS code.
    I want to have one menu column with a fixed width and a 100% height and
    the rest of the page for content.
    ----------------
    |.|.|<--100%-->|
    |.M.|----------|
    |.E.|----------|
    |.N.|----------|
    |.U.|----------|
    |.1.|----------|
    |.0.|----------|
    |.0.|----------|
    |.%.|----------|
    |.|.|----------|

    My problem is when i resize the window i have a white block that appear
    at the bottom of the page and also under the content box.
    My code is
    HTML
    <body>
    <div id="conteneur">
    <div id="menu">
    <a href=""><img src="/images/menu1.gif" alt="menu1" /></a>
    <a href=""><img src="/images/menu2.gif" alt="menu1" /></a>
    <a href=""><img src="/images/menu3.gif" alt="menu1" /></a>
    <a href=""><img src="/images/menu4.gif" alt="menu1" /></a>
    <br />
    <br />
    blabla</a>
    <br />
    </div>

    <div id="contenu">
    bla...balb...bla...bla...bla.bla...balb...bla...blabla...balb...bla...bla...bla.bla...balb...bla...bla

    </div>
    </div>
    </body>


    CSS


    Code:
    /* CSS Document */
    html,body{
    background:#ffffff;
    height:100%;
    margin:0;
    padding: 0;
    /*overflow: hidden;*/
    }
    #conteneur{
    height:100%;
    width:100%;
    }
    #menu{
    background:#E8CE34;
    float:left;
    height:100%;
    margin:0;
    padding:0;
    width:120px;
    display: inline;
    }
    /* hide from mac \*/
    * html #menu {margin-right: -3px;}
    * html #contenu {margin-left: 0;}
    /* end hide */

    #contenu{
    background:#2A4F8F;
    height:100%;
    margin:0;
    padding:0;
    margin-left: 0;
    }
     
    Not4u, Feb 25, 2004
    #1
    1. Advertising

  2. Not4u

    Mark Parnell Guest

    Mark Parnell, Feb 25, 2004
    #2
    1. Advertising

  3. Not4u

    Not4u Guest

    Mark Parnell wrote:

    > On Wed, 25 Feb 2004 18:20:55 +0100, Not4u <> declared in
    > alt.html:
    >
    >
    >>I have a problem with CSS code.

    >
    >
    > http://www.xs4all.nl/~apple77/columns/
    >
    > Specifically, in your case:
    >
    > http://www.xs4all.nl/~apple77/columns/1-1column_navleft.html
    >
    > Flavour to taste.
    >



    It doesn't work, resize the windows overlap the right part and you will
    see a white box (at the bottom).

    You can see my problem at:

    http://81.91.65.238/test.html
    resize the windows to see.
    Test with IE & Mozilla

    http://81.91.65.238/test2.html
    Seem ok in IE but not in Mozilla.

    I gonna be crazy

    I'm sure there is a solution.
     
    Not4u, Feb 26, 2004
    #3
  4. Not4u

    Paul Furman Guest

    Not4u wrote:
    >
    > It doesn't work, resize the windows overlap the right part and you will
    > see a white box (at the bottom).
    >
    > You can see my problem at:
    >
    > http://81.91.65.238/test.html
    > resize the windows to see.
    > Test with IE & Mozilla
    >
    > http://81.91.65.238/test2.html
    > Seem ok in IE but not in Mozilla.
    >
    > I gonna be crazy
    >
    > I'm sure there is a solution.



    I haven't looked at your code but what I did was real simple and I think
    it is a correct solution. The left column is a span (not a div)with
    float left and a width of say 8em then the remaining content is inside a
    div with a margin-left of 8em so it never wraps back over the bottom of
    the left column. http://hills.ccsf.edu/~pfurma02/index.php (lots of
    other things going on though)

    Your examples have some weird red zone that comes and goes, I don't know
    if that's supposed to be a third right column?
     
    Paul Furman, Feb 26, 2004
    #4
  5. Not4u

    Not4u Guest

    Paul Furman wrote:

    > Not4u wrote:
    >
    >>
    >> It doesn't work, resize the windows overlap the right part and you
    >> will see a white box (at the bottom).
    >>
    >> You can see my problem at:
    >>
    >> http://81.91.65.238/test.html
    >> resize the windows to see.
    >> Test with IE & Mozilla
    >>
    >> http://81.91.65.238/test2.html
    >> Seem ok in IE but not in Mozilla.
    >>
    >> I gonna be crazy
    >>
    >> I'm sure there is a solution.

    >
    >
    >
    > I haven't looked at your code but what I did was real simple and I think
    > it is a correct solution. The left column is a span (not a div)with
    > float left and a width of say 8em then the remaining content is inside a
    > div with a margin-left of 8em so it never wraps back over the bottom of
    > the left column. http://hills.ccsf.edu/~pfurma02/index.php (lots of
    > other things going on though)
    >
    > Your examples have some weird red zone that comes and goes, I don't know
    > if that's supposed to be a third right column?
    >


    The wierd red zone is a bug I don't want it !!
    I just want a left column with a fixed width and 100% of the height and
    a right column that take 100% of the rest of page.
    And if i overlap the text in the right column i don't want any wrap.
    I also want (or i would like ;-) ) the same render nder IE and Mozilla.

    I tried many thing without success (note i don't want to use a
    background image and i read
    http://www.alistapart.com/articles/fauxcolumns/ )
     
    Not4u, Feb 26, 2004
    #5
  6. Not4u

    Paul Furman Guest

    Not4u wrote:
    >...
    > I just want a left column with a fixed width and 100% of the height and
    > a right column that take 100% of the rest of page.
    > ...
    > i don't want to use a
    > background image
    > ...




    How about just a yellow background color to match the left column?



    > And if i overlap the text in the right column i don't want any wrap.


    I don't understand this part. look at "overflow" in CSS.
     
    Paul Furman, Feb 26, 2004
    #6
  7. Not4u

    Not4u Guest

    Paul Furman wrote:
    >
    > Not4u wrote:
    > >
    > > It doesn't work, resize the windows overlap the right part and you will
    > > see a white box (at the bottom).
    > >
    > > You can see my problem at:
    > >
    > > http://81.91.65.238/test.html
    > > resize the windows to see.
    > > Test with IE & Mozilla
    > >
    > > http://81.91.65.238/test2.html
    > > Seem ok in IE but not in Mozilla.
    > >
    > > I gonna be crazy
    > >
    > > I'm sure there is a solution.

    >
    > I haven't looked at your code but what I did was real simple and I think
    > it is a correct solution. The left column is a span (not a div)with
    > float left and a width of say 8em then the remaining content is inside a
    > div with a margin-left of 8em so it never wraps back over the bottom of
    > the left column. http://hills.ccsf.edu/~pfurma02/index.php (lots of
    > other things going on though)
    >
    > Your examples have some weird red zone that comes and goes, I don't know
    > if that's supposed to be a third right column?



    It doesn't work even with a span and a float left, you can see the
    result at:
    http://81.91.65.238/test3.html

    Resize the window and you will see :-(
     
    Not4u, Feb 26, 2004
    #7
  8. Not4u

    Not4u Guest

    I find the solution, it's work on IE,Mozilla & Opera.
    In the body style i add a background image of the lenght of my left menu
    and fix the background color of my right menu.
    You can see the result at : http://81.91.65.238/test2.html
    Now you can resize the window and everything is fine.

    I would like to know if it's possible to get the same result without a
    background image ?

    Paul Furman wrote:
    >
    > Not4u wrote:
    > >
    > > It doesn't work, resize the windows overlap the right part and you will
    > > see a white box (at the bottom).
    > >
    > > You can see my problem at:
    > >
    > > http://81.91.65.238/test.html
    > > resize the windows to see.
    > > Test with IE & Mozilla
    > >
    > > http://81.91.65.238/test2.html
    > > Seem ok in IE but not in Mozilla.
    > >
    > > I gonna be crazy
    > >
    > > I'm sure there is a solution.

    >
    > I haven't looked at your code but what I did was real simple and I think
    > it is a correct solution. The left column is a span (not a div)with
    > float left and a width of say 8em then the remaining content is inside a
    > div with a margin-left of 8em so it never wraps back over the bottom of
    > the left column. http://hills.ccsf.edu/~pfurma02/index.php (lots of
    > other things going on though)
    >
    > Your examples have some weird red zone that comes and goes, I don't know
    > if that's supposed to be a third right column?
     
    Not4u, Feb 27, 2004
    #8
  9. Not4u

    Mark Parnell Guest

    On Fri, 27 Feb 2004 01:47:30 +0100, Not4u <> declared in
    alt.html:

    > I find the solution, it's work on IE,Mozilla & Opera.
    > In the body style i add a background image of the lenght of my left menu
    > and fix the background color of my right menu.


    So what happens once you put a real menu in there? You have no way of
    knowing how big the user has their text, so no way of knowing how long
    the menu will be.

    Unless you are planning to use images of text, which is a bad idea
    anyway.

    > I would like to know if it's possible to get the same result without a
    > background image ?


    Why not just set that background colour on the body, rather than an
    image?

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Feb 27, 2004
    #9
  10. Not4u

    Not4u Guest

    My background image is repeat-y.
    If i only put a background colour if you resize the window and overlap
    the menu column with Mozilla you will loose the left column color and
    have the background color.
    See http://81.91.65.238/test3.html with Mozilla (resize and scrolldown)



    Mark Parnell wrote:
    >
    > On Fri, 27 Feb 2004 01:47:30 +0100, Not4u <> declared in
    > alt.html:
    >
    > > I find the solution, it's work on IE,Mozilla & Opera.
    > > In the body style i add a background image of the lenght of my left menu
    > > and fix the background color of my right menu.

    >
    > So what happens once you put a real menu in there? You have no way of
    > knowing how big the user has their text, so no way of knowing how long
    > the menu will be.
    >
    > Unless you are planning to use images of text, which is a bad idea
    > anyway.
    >
    > > I would like to know if it's possible to get the same result without a
    > > background image ?

    >
    > Why not just set that background colour on the body, rather than an
    > image?
    >
    > --
    > Mark Parnell
    > http://www.clarkecomputers.com.au
     
    Not4u, Feb 27, 2004
    #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. Lois
    Replies:
    1
    Views:
    3,261
    Ryan Stewart
    Dec 27, 2004
  2. cera
    Replies:
    1
    Views:
    1,291
    Neredbojias
    Aug 18, 2007
  3. Bernd Meier
    Replies:
    6
    Views:
    518
    GTalbot
    Jan 14, 2008
  4. Replies:
    7
    Views:
    185
    Tad McClellan
    Jun 22, 2006
  5. Replies:
    5
    Views:
    891
Loading...

Share This Page