Issue:
I am in the process of designing a webpage layout using divs and css instead of relying on an HTML table structure. It is essential for me to ensure that this design functions smoothly across all major browsers.
The challenge I'm facing involves a banner pane with a floated menu positioned over its left side. When the width of the banner exceeds the available space, it shifts below the menu and disrupts the layout by taking the entire content of the page along with it.
Possible Solutions Attempted:
One obvious approach is to use the "overflow: hidden" property in my CSS. However, this solution doesn't work effectively in Internet Explorer (IE) due to the relative positioning of the elements. Despite this limitation, I need to maintain relative positioning in this scenario.
Another suggestion was to set a specific width for the pane other than the default value to trigger the "overflow: hidden" property. While this does resolve the issue in IE by setting the width to 100%, it causes a new problem in Chrome and potentially other browsers where the designated space for the banner becomes too wide for the page. Consequently, Chrome behaves like IE initially did by pushing the banner to the bottom of the page. To mitigate this, I attempted setting the width value dynamically as "100% - menuWidth" since there's a menu overlay on the left side. Here’s the code snippet I tried:
style="width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth-(Menu Width goes here)+'px' : body.clientWidth-(And here too)+'px');"However, utilizing the expression method doesn't seem to enable the "overflow" property despite successfully setting the width with a straightforward value.
UPDATE: Upon request, I have included the code snippets used in my project.
HTML:
<div id="ControlPanel" runat="server" class="contentpane" align="center"></div>
<div id="Link" runat="server" align="right" onclick="location.href='address.html';"></div>
<div id="Header" runat="server" class="header" align="right"></div>
<div id="Links" runat="server" class="header" align="center">LINKS</div>
<div id="Search" runat="server" class="skingradient" align="right">[SEARCH]</div>
<div id="LeftPane" runat="server" class="leftpane" align="left">[USER]</br>LEFT</div>
<div id="TopPane" runat="server" class="toppane" align="left"><img src="image.jpg" alt="" /></div>
<div id="RightPane" runat="server" class="rightpane" align="center">RIGHT</div>
<div id="ContentPane" runat="server" class="contentpane" align="center">CONTENT</div>
<div></div>
<div id="BottomPane" runat="server" class="bottompane" align="center">BOTTOM</div>
<div id="Footer" runat="server" class="skingradient" align="center">[COPYRIGHT]</div>
</body>
</html>
CSS:
#Search
{
position: relative;
top: -20;
background-color: transparent;
z-index: 1;
}
#Header
{
height: 77px;
background-color: #0860A8;
background-image: url(ImagePath.gif);
background-position: right;
background-repeat: no-repeat;
border-bottom: 1 solid white;
}
#Links
{
background-color: #E6E6E6;
}
#TopPane
{
border-top: 1 solid #0860A8;
position: relative;
top: -20;
overflow: hidden;
}
#LeftPane
{
float: left;
position: relative;
top: -20;
width: 200px;
height: 100%;
background-color: #E6E6E6;
border-right: 1 solid #0860A8;
}
#ContentPane
{
position: relative;
top: -20;
width: 100%;
height: 100%;
background-color: Green;
z-index: -1;
}
#RightPane
{
z-index: 0;
position: relative;
top: -20;
height: 100%;
float: right;
width: auto;
background-color: Red;
max-width: 40%;
width:expression(document.compatMode=='CSS1Compat'? document.documentElement.clientWidth*2/5+'px' : body.clientWidth*2/5+'px');
}
The color coding aids in easy visualization and editing of the website.