Forum Moderators: not2easy
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 if i scrolldown.
My code is
HTML
<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
<br />
</div> <div id="contenu">
bla...balb...bla...bla...bla.bla...balb...bla...blabla...balb...bla...bla...bla.bla...balb...bla...bla
</div>
</div>
/* 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;
}
I have a problem when the browser window overlap the content text, the content box go under the menu box.
IE (scroll down)
¦.¦.¦<--100%-->¦
¦.M.¦----------¦
¦.E.¦----------¦
¦.N.¦---Body---¦
¦---¦---color--¦
In Mozilla (scroll down)
¦.¦.¦<--100%-->¦
¦.M.¦----------¦
¦.E.¦----------¦
¦-----Body-----¦
¦-----color----¦
I also tried this code:
<style type="text/css">
<!--
html,body{
background:red;
height:100%;
margin:0;
padding: 0;
/*overflow: hidden;*/
}
#menu {
background-color: #e8ce34;
float: left;
width: 120px;
text-align: center;
margin: 0;
padding:0;
height:100%;
margin:0;
padding:0;
}
#content {
width: 100%;
background-color: #2a4f8f;
height:100%;
margin: 0;
padding:0;
margin-left: 0;
}
#content2{
position:absolute;
width:450px;
background-color: #2a4f8f;
height:100%;
left:120px;
}
}
</style>
</head>
<body>
<div id="content">
<div id="menu">
<a href=""><img src="test.gif" alt="menu1" /></a><br />
<a href=""><img src="test.gif" alt="menu1" /></a>
</div>
<div id="content2">1-2-3 Content....Content....Content....Content....Content....Content....Content....Content....Content....Content....Content....Content....
</div>
</div>
</body> But i still have a problem when the browser window overlap the content.
How can i do to solve this problem?
You can see my pb at 81.91.65.238/test.html and 81.91.65.238/test.html
If you remove the height:100% the div will adjust itself to its contents, but of course won't go to the bottom of the screen like you probably want it to.
See this thread for a javascripted method to get the heights and set the div to the full height of your document:
[webmasterworld.com...]
When I want this kind of behavior, and I don't want to use javascript to get the document height, which is unreliable anyway cross browser, I use a table, 2 cells, virtually no code, no debugging issues, client is happy, site visitors are happy, anti table people unhappy, but the site is up and running and stable and took no time to put up, validates perfectly, and leaves me free to do more interesting things.
