Forum Moderators: not2easy
I have a problem with designing the following layout!
/-----------------------------------------------\
¦---/\---¦ <--Scrollbar up--------------------¦
¦--------¦--------------------------------------¦
¦---M---¦--------------------------------------¦
¦---e ---¦------GlovalDiv---------------------¦
¦---n ---¦------Contents---------------------¦
¦---u ---¦--------------------------------------¦
¦--------¦--------------------------------------¦
¦--------¦--------------------------------------¦
¦---\/---¦ <--Scrollbar down-----------------¦
\-----------------------------------------------/
Hope you'll understand what I mean!
the whole thing i showed you is a div which is resizable with javascript! (take it like a window)
and the menu on the left is dynamic! menus are added in real time!
so suppose I have this GlobalDiv and the MenuDiv which is floating on the left...
how can I make the menu's height 100% of the height of the GlobalDiv...
I've been trying for a while and I couldn't find a solution with FF and IE...
Any guru got a solution?
+ is there a way to show the scrollbars like in the ascii image?
I concured this problem using three divs. Not sure if it's the proper way to do it but it does work. My code...
CSS
div.content {
border: #a7a68f solid;
border-width: 0px 1px 0px 0px;
height: auto;
margin-right: 159px;
min-height: 600px;
padding: 4px 4px 4px 4px;
}
div.inset {
border: #a7a68f solid;
border-width: 0px 0px 0px 1px;
float: right;
font-size: 11px;
padding: 4px;
margin: 1px 1px 0px 0px;
width: 150px;
}
div.page {
border: #a7a68f solid 1px;
float: left;
margin: 1px -161px 0px -1px;
padding: 0px;
width: 100%;
}
XHTML code...
<div class="page">
<div class="content"></div>
</div>
<div class="inset"></div>
I know my side bar is on the right but I think you'll be able to play with it. If you can't figure it out send me a sticky message please. Good luck!
John
assume the height of the page is about 200px, and you fill too many lines in the inset div which will lead to overflow... if you set overflow:auto to the inset div, it will expand and never create a scrollbar (tested with FF)...
I need the size of the div inside to be fixed... you got my point?
anyway, Thanks a lot!
Elie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<title>scrolling menu</title>
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/.shortbox {
height: 100px;
border: 1px solid black;
}.tallbox {
height: 200px;
border: 1px solid black;
}.menu {
background-color: yellow;
float: left;
height: 100%;
margin-right: 10px;
overflow: auto;
padding-right: 20px;
}/*]]>*/
</style></head>
<body>
<div class="shortbox">
<div class="menu">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div> <!-- end menu --><p>content</p>
</div> <!-- end shortbox -->
<div class="tallbox">
<div class="menu">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div> <!-- end menu --><p>content</p>
</div> <!-- end tallbox -->
</body>
</html>
gary
100% :D
Thank you!
