I don’t know and can’t understand why such a silly thing should happen
But I want to figure it out , and I need your help
The Strategy :
Wrapper
—————————————————————————————-
Header
—————————————————————————————-
MidRowContainer
LeftColContainer | ContentWrapper | RightColContainer
Footer
—————————————————————————————-
LeftColContainer & RightColContainer each includes another div
called : LeftColumn & Right Column
We want to let the Contents Part increase with our contents
I prefer to have this style .
Worked as we wanted in FireFox & IE 7.0 but IE 6.0 do that in a way that it stretches the wrapper part in a silly style and it’s width increses not height !!
please help me with this
Thanks
the CSS Code
body {
}
#Wrapper
{
margin : auto ;
background-color : red ;
/*
height : auto ;
position : relative ;
*/
max-width : 778px ;
min-width : 778px ;
}
/*-------------------------- */
#LeftColContainer
{
width : 150px ;
float : left ;
margin : 0 0 0 0 ;
background-color : Green ;
height : 400px ;
}
#LeftColumn
{
margin : 5px 5px 5px 5px ;
}
/*-------------------------- */
#RightColContainer
{
width : 150px ;
float : left ;
margin : 0 0 0 0 ;
background-color : Green ;
height : 400px ;
}
#RightColumn
{
margin : 5px 5px 5px 5px ;
}
/*-------------------------- */
#ContentWrapper
{
margin : 0px 5px 0 5px ;
width : 458px ;
float : left ;
background-color : lime ;
height : auto ;
}
#FloatWrapper
{
max-width :440px ; */
margin : 5px 5px 5px 5px ;
height : auto ;
}
#MidRowContainer
{
min-height : 500px ;
height : auto ;
overflow : auto ;
}
/*-------------------------- */
#Header
{
width : 778px ;
height : 120px ;
background-color : Maroon ;
margin-bottom : 5px ;
}
#Footer
{
width : 468px ;
height : 40px ;
background-color : Maroon ;
text-align : center ;
vertical-align : middle ;
color : White ;
line-height : 34px ;
}
/*-------------------------- */
/*
html>body #ContentWrapper , #FloatWrapper
{
width : 468px ;
}
*/
———————————————-
The HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="VUTest.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="Wrapper">
<div id="Header">
<span>integrate object programming language capabilities with
relational databases managed by Oracle, DB2, Sybase, and other relational database
managers. Object-relational mapping products are designed to work well with object
programming languages such as C#, C++, and Java. These articles provide a background
on object-relational mapping products and their use.</span>
</div> <!-- << Header End >> -->
<div id="MidRowContainer">
<br />
<div id="LeftColContainer">
<div id="LeftColumn">
<span> </span>
<span>integrate object programming language capabilities with
relational databases managed by Oracle, DB2, Sybase, and other relational database
managers. </span> </div>
<!-- << LeftColumn End >> -->
</div> <!-- << LeftColContainer End >> -->
<div id="ContentWrapper">
<div id="FloatWrapper">
<span>integrate object programming language capabilities with
relational databases managed by Oracle, DB2, Sybase, and other relational database
managers. Object-relational mapping products are designed to work well with object
programming languages such as C#, C++, and Java. These articles provide a background
on object-relational mapping products and their use.</span>
<br />
integrate object programming language capabilities with relational databases managed
by Oracle, DB2, Sybase, and other relational <br />
</div> <!-- << FloatWrapper End >> -->
<div id="Footer">
<span>Copyright Reserved</span></div> <!-- << Footer End >> -->
</div> <!-- << ContentWrapper End >> -->
<div id="RightColContainer">
<div id="RightColumn">
<span>integrate object programming language capabilities with
relational databases managed by Oracle, </span> </div>
<!-- << RightColumn End >> -->
</div> <!-- << RightColContainer End >> -->
</div> <!-- << MidRowContainer End >> -->
</div> <!-- << Wrapper End >> -->
</form>
</body>
</html>