By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,867 Members | 1,981 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,867 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
11 Replies


P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
DU
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

P: n/a
DU
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.