Log in

View Full Version : CSS frames, width problem



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)*/
}

stedan
03-21-2007, 03:59 PM
I've to add the information that I checked in Firefox and it's working fine. It's this f.. IEX who make this troubles, I think I need to do integrate an IEX hack, the hack proposed by dynamicdrive doesn't work in this case.

Every idea appreciated.

Thank's

Sparaker
03-21-2007, 04:03 PM
Please pass on the html code with it so i might be able to help.



P.S sorry i accidently clicked on the link that says thank this user for his post. so don't mind that.