stedan
03-21-2007, 06:08 AM
Hi, I've a problem with the width of top and bottom CSS frame. The top frame should has the width until the right frame and the bottom frame should has the width of 100%, the right frame shouldn't go over the bottom frame. Does somebody knows how to realize?
Thank you for every idea.
Daniel
Here the sample gif of the result:
http://www.dsis.ch/portals/0/public/css_top_left_bottom_right.gif
Here the css code:
#framecontentLeft{
position: absolute;
top: 180px; /*Width of top frame div*/
left: 0;
bottom: 100px; /*Width of bottom frame div*/
width: 241px; /*Width of left frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#framecontentRight{
position: absolute;
left: auto;
top: 0;
right: 0;
bottom: 100px;
width: 240px; /*Width of right frame div*/
color: white;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: red;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
right: 0; /*Set right value to WidthOfRightFrameDiv*/
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
height: 180px; /*Height of top frame div*/
width: auto;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: yellow;
color: black;
}
#framecontentBottom{
position: absolute;
top: auto;
right: 0; /*Set right value to WidthOfRightFrameDiv*/
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
width: 100%;
height: 100px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: brown;
color: white;
}
#maincontent{
position: fixed;
top: 180px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 100px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 241px; /*Set left value to WidthOfLeftFrameDiv*/
right: 240px; /*Set right value to WidthOfRightFrameDiv*/
overflow: auto;
background-color: black;
color: white;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
Thank you for every idea.
Daniel
Here the sample gif of the result:
http://www.dsis.ch/portals/0/public/css_top_left_bottom_right.gif
Here the css code:
#framecontentLeft{
position: absolute;
top: 180px; /*Width of top frame div*/
left: 0;
bottom: 100px; /*Width of bottom frame div*/
width: 241px; /*Width of left frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#framecontentRight{
position: absolute;
left: auto;
top: 0;
right: 0;
bottom: 100px;
width: 240px; /*Width of right frame div*/
color: white;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: red;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
right: 0; /*Set right value to WidthOfRightFrameDiv*/
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
height: 180px; /*Height of top frame div*/
width: auto;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: yellow;
color: black;
}
#framecontentBottom{
position: absolute;
top: auto;
right: 0; /*Set right value to WidthOfRightFrameDiv*/
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
width: 100%;
height: 100px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: brown;
color: white;
}
#maincontent{
position: fixed;
top: 180px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 100px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 241px; /*Set left value to WidthOfLeftFrameDiv*/
right: 240px; /*Set right value to WidthOfRightFrameDiv*/
overflow: auto;
background-color: black;
color: white;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}