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

N

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

Not4u

Mark said:
http://www.xs4all.nl/~apple77/columns/

Specifically, in your case:

http://www.xs4all.nl/~apple77/columns/1-1column_navleft.html

Flavour to taste.
Click to expand...


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

Paul Furman

Not4u said:
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.
Click to expand...


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

Not4u

Paul said:
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?
Click to expand...

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

Paul Furman

Not4u said:
...
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
...
Click to expand...



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.
Click to expand...

I don't understand this part. look at "overflow" in CSS.
 
N

Not4u

Paul said:
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?
Click to expand...


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 :-(
 
N

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

Mark Parnell

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.
Click to expand...

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 ?
Click to expand...

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

Not4u

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)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align img inside nav tabs section 5
Help with Visual Lightbox: Scripts 2
Impossible carved cubes (1 line of html, 3 elements of css) WOW! 1
Interfering CSS 1
Stuck with html and css 25
Working on mobile css menu with plenty of frustration! 2
Help with my responsive home page 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

Total: 165 (members: 1, guests: 164)
Robots: 520

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top