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

Not4u

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;
}

Jul 20 '05 #1

Subscribe Post Reply

7825

Andrew Thompson

"Not4u" ...
....

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.

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

Jul 20 '05 #2

Barbara de Zoete

Not4u wrote:

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.|----------|
|.%.|----------|
|.|.|----------|

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

body {
background:color; /*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:color; /*background color for your content*/ }

div#menu {
display:block;
width:130px; /widht of the menu*/
position:absolute;
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#content { 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_centreren-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

Jul 20 '05 #3

Not4u

Barbara de Zoete wrote:

Not4u wrote:
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.|----------|
|.%.|----------|
|.|.|----------|

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

body {
background:color; /*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:color; /*background color for your content*/ }

div#menu {
display:block;
width:130px; /widht of the menu*/
position:absolute;
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#content { 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_centreren-content.html>
for a three column layout done in pretty much the same way.

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

Jul 20 '05 #4

Not4u

Barbara de Zoete wrote:

Not4u wrote:
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.|----------|
|.%.|----------|
|.|.|----------|

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

body {
background:color; /*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:color; /*background color for your content*/ }

div#menu {
display:block;
width:130px; /widht of the menu*/
position:absolute;
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#content { 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_centreren-content.html>
for a three column layout done in pretty much the same way.

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#content {
height:auto; }*/

div#menu {
background-color:green;
position:absolute; /* 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...bla...bla...bla.bla...balb...bla...bl abla...balb...bla...bla...bla.bla...balb...bla...b la
</div>

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

Jul 20 '05 #5

Barbara de Zoete

Not4u wrote:

Barbara de Zoete wrote:
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.|----------|
|.%.|----------|

[snip padding on body as possible solution]
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.

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

Jul 20 '05 #6

Neal

On Wed, 25 Feb 2004 18:20:40 +0100, Not4u <no***@chez.com> wrote:

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.

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

Jul 20 '05 #7

Not4u

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:

Not4u wrote:
Barbara de Zoete wrote:
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.|----------|
|.%.|----------|

[snip padding on body as possible solution]

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.

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

Jul 20 '05 #8

Barbara de Zoete

Please, do not toppost.

Not4u wrote:

Barbara de Zoete 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.|----------|
[snip padding on body as possible solution]
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.

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.

You can see my problem at:

http://81.91.65.238/test.html

http://81.91.65.238/test2.html

Did you see Neals post, at
<news://News.CIS.DFN.DE:119/op**************@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:transparent), 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

Jul 20 '05 #9

Not4u wrote:

Hello,
I have a problem with CSS code.

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

DU

Jul 20 '05 #10

Not4u wrote:

Hello,
I have a problem with CSS code.

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

Jul 20 '05 #11

Not4u

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:

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;
}

Jul 20 '05 #12

Similar topics

Emulate Max-width & Min-Width (hard)

by: R0bert Nev1lle | last post by:

Internet Explorer always presents me with a challenge (partial repost). The current issue involves emulating max-width in IE using the technique described by Svend Tofte. ...

HTML / CSS

Table cell height & standards

by: Mike Mimic | last post by:

Hi! I noticed that for the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...

HTML / CSS

Height at 100% Not Working

by: Mike Collins | last post by:

I am trying to create some pages and have them take 100% of the window, but I cannot get 100% to work. If I set the height of my div, the page displays a scroll bar and it looks like I set the...

ASP.NET

create a div with same height & width as another element

by: toffee | last post by:

Hi all, Here's the situation: I have a table of data; and I would like to add a div with exactly the same height and width as the top-left header. The problem is as the data is dynamic and the...

Javascript

Two divs and the old 100% height problem

by: joshthomas99 | last post by:

Hello, Yes, I've spent hours reading through all the old postings and searched the net - but couldnt find a solution to the 100% height problem with nested divs. Basically I want the first...

HTML / CSS

100% height and footer at bottom

by: sannymak | last post by:

Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...

HTML / CSS

100% header and 100%footer image

by: darkzone | last post by:

Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in...

HTML / CSS

fill the parent window height using 100%

by: soms2m | last post by:

HELLO ALL, I want to fill the parent window height with respect to the sub window height which is loading using ajax (mootools). For example if the parent window height is normal and the loading...

Javascript

Positioning, Overlap, and greater than 100% height/width

by: Christopera | last post by:

Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General