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

**Andrew Thompson** · Jul 20 '05, 09:52 PM

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

"Not4u" ...
....[color=blue]
> 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.[/color]

When I resize the window, I don't see
the problems you refer to, but then,
since my browser is pointing at an
actual URL, that might explain
the difference in rendering. ;-)

--
Andrew Thompson
* http://www.PhySci.org/ Open-source software suite
* http://www.PhySci.org/codes/ Web & IT Help
* http://www.1point1C.org/ Science & Technology

**Barbara de Zoete** · Jul 20 '05, 09:52 PM

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

Not4u wrote:
[color=blue]
> 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.|----------|
> |.%.|----------|
> |.|.|----------|[/color]

I like the methode most where you use what you have, like:

body {
background:colo r; /*background color for your menu*/ }

div#content {
display:block;
height:100%;
padding:2em 3em 2em 2em; /*or whatever suites your needs*/
border:0;
margin:150px /*width of the area for your menu*/
background:colo r; /*background color for your content*/ }

div#menu {
display:block;
width:130px; /widht of the menu*/
position:absolu te;
top:2em;
left:7px; }

The columns are now created in the viewport. Basically that's it. It
might be you need a furter body>div#conten t { height:auto; } for the
Gecko based browsers to prevent from funy behaviour. Also play with
Quirks versus Standards Compliance Mode a bit. See what give you the
best results.

Be sure to keep all of the actual content inside the containing
div#content. Style your menu (prefer lists, right?) and put it inside de
containing div#menu.
Finished.

See example at
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
or
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centr eren-content.html>
for a three column layout done in pretty much the same way.
--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html

http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

**Not4u** · Jul 20 '05, 09:52 PM

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

Barbara de Zoete wrote:
[color=blue]
> Not4u wrote:
>[color=green]
>> 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.|----------|
>> |.%.|----------|
>> |.|.|----------|[/color]
>
>
> I like the methode most where you use what you have, like:
>
> body {
> background:colo r; /*background color for your menu*/ }
>
> div#content {
> display:block;
> height:100%;
> padding:2em 3em 2em 2em; /*or whatever suites your needs*/
> border:0;
> margin:150px /*width of the area for your menu*/
> background:colo r; /*background color for your content*/ }
>
> div#menu {
> display:block;
> width:130px; /widht of the menu*/
> position:absolu te;
> top:2em;
> left:7px; }
>
> The columns are now created in the viewport. Basically that's it. It
> might be you need a furter body>div#conten t { height:auto; } for the
> Gecko based browsers to prevent from funy behaviour. Also play with
> Quirks versus Standards Compliance Mode a bit. See what give you the
> best results.
>
> Be sure to keep all of the actual content inside the containing
> div#content. Style your menu (prefer lists, right?) and put it inside de
> containing div#menu.
> Finished.
>
> See example at
> <http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
> or
> <http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centr eren-content.html>
> for a three column layout done in pretty much the same way.[/color]

I add a long image (h:300px w:20px) in the menu box, to show my prob.

It doesn't work, when i resize the windows and i scroll-down under IE 6
i have the body background color under the content box, the content box
doesn't take 100% of the height. With Mozilla i have an other pb.

In IE (scroll down)
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|.N.|---Body---|
|---|---color--|

In Mozilla (scroll down)
|.|.|<--100%-->|
|.M.|----------|
|.E.|----------|
|-----Body-----|
|-----color----|

**Not4u** · Jul 20 '05, 09:52 PM

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

Barbara de Zoete wrote:
[color=blue]
> Not4u wrote:
>[color=green]
>> 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.|----------|
>> |.%.|----------|
>> |.|.|----------|[/color]
>
>
> I like the methode most where you use what you have, like:
>
> body {
> background:colo r; /*background color for your menu*/ }
>
> div#content {
> display:block;
> height:100%;
> padding:2em 3em 2em 2em; /*or whatever suites your needs*/
> border:0;
> margin:150px /*width of the area for your menu*/
> background:colo r; /*background color for your content*/ }
>
> div#menu {
> display:block;
> width:130px; /widht of the menu*/
> position:absolu te;
> top:2em;
> left:7px; }
>
> The columns are now created in the viewport. Basically that's it. It
> might be you need a furter body>div#conten t { height:auto; } for the
> Gecko based browsers to prevent from funy behaviour. Also play with
> Quirks versus Standards Compliance Mode a bit. See what give you the
> best results.
>
> Be sure to keep all of the actual content inside the containing
> div#content. Style your menu (prefer lists, right?) and put it inside de
> containing div#menu.
> Finished.
>
> See example at
> <http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_twee-kolommen-layout.html>
> or
> <http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centr eren-content.html>
> for a three column layout done in pretty much the same way.[/color]
My code is :

<style type="text/css">
<!--
body {
background-color:red; /* Dit wordt de kleur van de 'kolom' in de kantlijn,
waarin je bijvoorbeeld je menu weer laat geven */
margin:0;
padding:0;
border:0; }

div#content {
background-color:white; /* Dit wordt de kleur van de brede 'kolom',
waarin de inhoud
van je pagina wordt weergegeven */
padding:0;
border:0;
border-left:3px outset;
margin:0 0 0 150px; /* De breedte van de linker kantlijn is de breedte
van de andere kolom */
height:100%; /*Deze is belangrijk om de kolom met inhoud visueel tot
het einde van de
viewport te laten komen */
color:black; }

/*body>div#conte nt {
height:auto; }*/

div#menu {
background-color:green;
position:absolu te; /* deze, samen met de volgende twee, creëert een
ruimte om het menu te
kunnen plaatsen */
top:0;
left:0;
width:140px; /* breedte voor het menu, smaller of maximaal net zo breed
al de marge die je
eerder hebt opgegeven bij de div#inhoud */
padding:0 5px;
border:0;
height:100%;
margin:0;
color:white; }
</style>
<body>
<div id="content">

bla...balb...bl a...bla...bla.b la...balb...bla ...blabla...bal b...bla...bla.. .bla.bla...balb ...bla...bla
</div>

<div id="menu">
<a href=""><img src="test.gif" alt="menu1" /></a>
<br />
<br />
blabla</a>
<br />
</div>

**Barbara de Zoete** · Jul 20 '05, 09:52 PM

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

Not4u wrote:
[color=blue]
> Barbara de Zoete wrote:
>[color=green]
>> Not4u wrote:
>>[color=darkred]
>>> 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.|----------|
>>> |.%.|----------|[/color][/color][/color]

[snip padding on body as possible solution][color=blue]
>
> It doesn't work, when i resize the windows and i scroll-down under IE 6
> i have the body background color under the content box, the content box
> doesn't take 100% of the height. With Mozilla i have an other pb.[/color]

I see what you mean. I never encountered this as a problem, because
usually my content is a lot bigger (in height) than my menu's are. But
if they are not, then this is a problem yes.
The 100% height of what? That is where a possible solution is at. Of the
viewport? Of the body?

Any way, good luck with finding a solution that works for you.
--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html

http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

**Neal** · Jul 20 '05, 09:53 PM

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

On Wed, 25 Feb 2004 18:20:40 +0100, Not4u <not4u@chez.com > wrote:
[color=blue]
> 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.[/color]

Faux Columns

http://www.alistapart.com/articles/fauxcolumns/

It’s a beginning CSS designer’s nightmare and a frequently asked question at ALA: Multi-column CSS layouts can run into trouble when one of the columns stops short of its intended lengt…

**Not4u** · Jul 20 '05, 09:53 PM

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

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.

Barbara de Zoete wrote:[color=blue]
>
> Not4u wrote:
>[color=green]
> > Barbara de Zoete wrote:
> >[color=darkred]
> >> Not4u wrote:
> >>
> >>> 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.|----------|
> >>> |.%.|----------|[/color][/color]
>
> [snip padding on body as possible solution][color=green]
> >
> > It doesn't work, when i resize the windows and i scroll-down under IE 6
> > i have the body background color under the content box, the content box
> > doesn't take 100% of the height. With Mozilla i have an other pb.[/color]
>
> I see what you mean. I never encountered this as a problem, because
> usually my content is a lot bigger (in height) than my menu's are. But
> if they are not, then this is a problem yes.
> The 100% height of what? That is where a possible solution is at. Of the
> viewport? Of the body?
>
> Any way, good luck with finding a solution that works for you.
> --
>
> Barbara
>
> http://home.wanadoo.nl/b.de.zoete/html/weblog.html
> http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html[/color]

**Barbara de Zoete** · Jul 20 '05, 09:53 PM

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

Please, do not toppost.

Not4u wrote:
[color=blue]
> Barbara de Zoete wrote:
>[color=green][color=darkred]
>>>>>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.|----------|[/color]
>>
>>[snip padding on body as possible solution]
>>[color=darkred]
>>>It doesn't work, when i resize the windows and i scroll-down under IE 6
>>>i have the body background color under the content box, the content box
>>>doesn't take 100% of the height. With Mozilla i have an other pb.[/color]
>>
>>I see what you mean. I never encountered this as a problem, because
>>usually my content is a lot bigger (in height) than my menu's are. But
>>if they are not, then this is a problem yes.
>>The 100% height of what? That is where a possible solution is at. Of the
>>viewport? Of the body?
>>
>>Any way, good luck with finding a solution that works for you.[/color][/color]
[color=blue]
> You can see my problem at:
>
> http://81.91.65.238/test.html
>
> http://81.91.65.238/test2.html[/color]

Did you see Neals post, at
<news://News.CIS.DFN.DE :119/opr3x2lijgdvhyk s@news.rcn.com> ? He suggests
a _sure_ way of visually rendering a side column, unless the GUI of the
visitor doesn't render pictures. As it turns out, I use a combination of
both of these methods (coloured background, sufficient left or right
margin on div#content (with color:transpare nt), plus a tiny image with
the required width, just one px high, as a background image on the body
of the document, repeat-y). Can't fail than.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html

http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

DU · Jul 20 '05, 09:53 PM

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

Not4u wrote:
[color=blue]
> Hello,
> I have a problem with CSS code.[/color]

Stop multi-posting and please learn how to multi-post.
If your code is long, best is to post an url.

DU

DU · Jul 20 '05, 09:53 PM

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

Not4u wrote:
[color=blue]
> Hello,
> I have a problem with CSS code.[/color]

Please do NOT multi-post and learn how to cross-post in newsgroups: that
is if you really need to do that. And just post an url if your code is long.

DU

**Not4u** · Jul 20 '05, 09:54 PM

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 ?

Not4u wrote:[color=blue]
>
> 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...bl a...bla...bla.b la...balb...bla ...blabla...bal b...bla...bla.. .bla.bla...balb ...bla...bla
>
> </div>
> </div>
> </body>
>
> CSS
>
> Code:
> /* CSS Document */
> html,body{
> background:#fff fff;
> height:100%;
> margin:0;
> padding: 0;
> /*overflow: hidden;*/
> }
> #conteneur{
> height:100%;
> width:100%;
> }
> #menu{
> background:#E8C E34;
> 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:#2A4 F8F;
> height:100%;
> margin:0;
> padding:0;
> margin-left: 0;
> }[/color]

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment