Forum Moderators: not2easy
Left column is 100% height div contained within 100% height outer div (both on main stylesheet) and contains div for menu (which has separate stylesheet)
Css for left column div is
float: left;
padding: 0px;
z-index: 1;
vertical-align: top;
text-align: left;
width: 17%;
height: 100%;
CSS for menu div is
font-family: Arial, Verdana, sans-serif;
height: 20%;
background-color: #ffffff;
border: 2px #000080 solid;
font-size: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding: 0px;
margin-left: 5px;
width: 95%;
vertical-align : top;
In order to retain page layout, the left column has to retain 100% height. My problem is with the menu which also retains 100% height, regardless of whether I set height to auto or a value such as 20%. I don't want the menu the full height of its containing div - what have I got wrong in the above that it won't give me the 20% height I want?
Many thanks, Jools
Also, is it necessary that it be given a height at all? Would it be sufficient to just let the height be auto to accomodate whatever content you put in it?
can't see any problems with what's here, I tried a quick mockup with the code you give and it's giving the menu 20% height
here's what I used.. post your code if there's differences
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
}#left {
background: #ff0;
float: left;
padding: 0px;
width: 17%;
height: 100%;
}#menu {
height: 20%;
background: #fff;
border: 2px solid #000080;
margin: 0 0 0 5px;
padding: 0;
width: 95%;
}
</style>
</head>
<body>
<div id="left">
<div id="menu">menu</div>
</div>
</body>
</html>
Suzy
