三行两列,自适应宽度、高度 ,兼容firefox和ie
index.jsp
layout.css
index.jsp
<body id="home">
<div id="header">
<jsp:include page="./header.jsp" flush="true" />
</div>
<div id="container">
<div id="sidebar">
<jsp:include page="./sidebar.jsp" flush="true" />
</div>
<div id="content_1st"><div id="content_2nd"><div id="content_3rd">
<jsp:include page="./content.jsp" flush="true" />
</div></div></div>
</div>
<div id="footer">
<jsp:include page="./footer.jsp" flush="true" />
</div>
</body>
<div id="header">
<jsp:include page="./header.jsp" flush="true" />
</div>
<div id="container">
<div id="sidebar">
<jsp:include page="./sidebar.jsp" flush="true" />
</div>
<div id="content_1st"><div id="content_2nd"><div id="content_3rd">
<jsp:include page="./content.jsp" flush="true" />
</div></div></div>
</div>
<div id="footer">
<jsp:include page="./footer.jsp" flush="true" />
</div>
</body>
layout.css
/*-----------------------------------------------
Author: ison
Version: 2007.6
----------------------------------------------- */
/*
GLOBAL --------------------- */
body {
margin: 10px;
width:expression( documentElement.clientWidth < 900 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 900 ? "900" : "auto") : "900px") : "auto" );
}
/*
LAYOUT --------------------- */
#header, #footer {width:100%;min-width:900px;}
#sidebar {padding:0;width:200px;float:left;margin:0 -200px 0 0;height:auto;}
#footer{clear:both;}
/*
CONTAINER --------------------- */
#container{width:100%; height:auto;}
#content_1st {margin: 0 0 0 200px; padding: 0; float: right;}
#content_2nd{width:100%; margin:0;}
#content_3rd{
min-width:700px;
width:expression(documentElement.clientWidth<900?(documentElement.clientWidth==0?(body.clientWidth <900?"900":"auto"):"800px"):"auto" );
}
#content_3rd[id]{overflow:hidden;}
Author: ison
Version: 2007.6
----------------------------------------------- */
/*
GLOBAL --------------------- */
body {
margin: 10px;
width:expression( documentElement.clientWidth < 900 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 900 ? "900" : "auto") : "900px") : "auto" );
}
/*
LAYOUT --------------------- */
#header, #footer {width:100%;min-width:900px;}
#sidebar {padding:0;width:200px;float:left;margin:0 -200px 0 0;height:auto;}
#footer{clear:both;}
/*
CONTAINER --------------------- */
#container{width:100%; height:auto;}
#content_1st {margin: 0 0 0 200px; padding: 0; float: right;}
#content_2nd{width:100%; margin:0;}
#content_3rd{
min-width:700px;
width:expression(documentElement.clientWidth<900?(documentElement.clientWidth==0?(body.clientWidth <900?"900":"auto"):"800px"):"auto" );
}
#content_3rd[id]{overflow:hidden;}