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

02-25-2004, 05:20 PM

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...bl abla...balb...bla...bla...bla.bla...balb...bla...b la

</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

02-25-2004, 10:25 PM

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/column...n_navleft.html

Flavour to taste.

--
Mark Parnell
http://www.clarkecomputers.com.au

02-26-2004, 03:00 PM

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/column...n_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.

02-26-2004, 04:42 PM

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?

02-26-2004, 06:23 PM

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/ )

02-26-2004, 07:25 PM

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.

02-26-2004, 10:47 PM

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

02-27-2004, 12:47 AM

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?

02-27-2004, 01:59 AM

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

02-27-2004, 10:09 AM

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

02-26-2004, 03:00 PM	#3
Not4u Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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/column...n_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.

02-26-2004, 04:42 PM	#4
Paul Furman Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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?

02-26-2004, 06:23 PM	#5
Not4u Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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/ )

02-26-2004, 07:25 PM	#6
Paul Furman Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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.

02-26-2004, 10:47 PM	#7
Not4u Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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

02-25-2004, 05:20 PM	#1
	CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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...bl abla...balb...bla...bla...bla.bla...balb...bla...b la </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

02-25-2004, 10:25 PM	#2
Mark Parnell Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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/column...n_navleft.html Flavour to taste. -- Mark Parnell http://www.clarkecomputers.com.au

02-27-2004, 12:47 AM	#8
Not4u Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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?

02-27-2004, 01:59 AM	#9
Mark Parnell Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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

02-27-2004, 10:09 AM	#10
Not4u Posts: n/a	Re: CSS 2 columns (1 nav + 1 content) 100% height & 100% width 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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search