Hi, I have a problem with the following code:
- HTML: Select all
<html>
<head>
<title>2 Columns Equal Height.</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial;
color: black;
text-align: center; /* centering the content for IE6 */
background-repeat: repeat-x;
background-image: url(images/mainBkg.jpg);
background-color: #7F0E12;
margin:0px;
}
#wrapper {
display:table; /* must put this in for FireFox. */
width:777px;
margin:auto; /* for IE6 and Firfox centering */
text-align:left; /* so that IE6 and Firefox puts the text to the left
*/
/*border:1px solid blue;*/
height:20px; /* Have to put SOMETHING in here for the height for both
browser. DO NOT put in a percentage, must be a pixel value */
border-left:solid 1px #000000;
border-right:solid 1px #000000;
}
#header{
background-color: #CB0117;
text-align:right;
height:97px;
}
#mainMenu{
background-color: #D00016;
height:32px;
background-image: url(images/topMenuBkg.jpg);
}
#content{
height:100%;
background-color:#CCFF00;
table-layout:auto;
}
#sidebar {
float:left; /* float the menu to the left */
width:130px;
background-color:#e6e6cc;
background-image: url(images/leftMenuBkg.jpg);
/*border:1px solid red;*/
height:100%; /* so the menu has the height of the main content and
visa versa */
}
#main {
float:right; /* float the content to the right */
width:645px;
background-color:#ffffff;
height:100%;
}
/* make it so that the main content has a 5px "padding" in both Ie and
FireFox. */
#mainpadding {
margin:5px;
}
#footer
{
background-color:#D00016;
display:table; /* must put this in for FireFox. */
width:777px;
margin:auto; /* for IE6 and Firfox centering */
text-align:left; /* so that IE6 and Firefox puts the text to the left
*/
/*border:1px solid blue;*/
height:20px; /* Have to put SOMETHING in here for the height for both
browser. DO NOT put in a percentage, must be a pixel value */
border-left:solid 1px #000000;
border-right:solid 1px #000000;
}
#clear1
{
clear:both;
}
/*http://www.thescripts.com/forum/thread100443.html*/
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/Header/MainLogo.jpg" width="357" height="97"></div>
<div id="mainMenu">Main Menu</div>
<div id="sidebar">
<h2>Menu</h2>
<p>test</p>
<p>test</p>
</div>
<div id="main">
<div id="mainpadding">
<h2>Main Content</h2>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
</div>
<div id="clear1"></div>
</div>
<div id="footer">Footer</div>
</body>
</html>
In FF on PC it works fine, in IE however it looks like I'm having a problem with the height of "sideNav" and "main"
Basically what I want is a layout that contains header, menu, and then a side bar and main content area that are both the same height, then a footer eg with a table it could be done with:
- HTML: Select all
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="14%"> </td>
<td width="86%"><p>left cell is same height as this</p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
I've spent hours trying to get this to work nicely on all browsers....
this image shows the problem when looking with FF and firebug :
notice the over run on the sidebar div as heighlighted. how do I get this layout to work?? can't be that hard can it???
Thanks
Css div height probelm in layout...aaahhhhggg
Mar 9th, 2007, 12:49
Similar Threads
