Removeable side bar layout possible without CSS expression?
I have the following layout with a sidebar that is only present on some pages and not others. When the sidebar is not present #main should fill the available width of the container.
It works but makes use of a CSS expression - is it possible to achieve the same layout without this expression?
<!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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/* reset css */
* {
border: 0px none;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
font-size: 100%;
}
/* end reset */
#contain开发者_运维问答er {
margin: 0 auto;
width: 800px;
background-color: red;
}
#sidebar {
display: inline;
float: left;
width: 130px;
background-color: green;
}
#main {
float: left;
background-color: blue;
width: expression(document.getElementById('sidebar') == null ? "100%" : "670px");
max-width: 100%;
}
#sidebar + #main {
width: 670px;
background-color: yellow;
}
#clear {
clear: both;
height: 1px;
font-size: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar"><p>This is the side bar</p></div>
<div id="main"><p>This needs to expand to fill available width, what if I have sufficient content in here to push this div so it spans across the whole width of the page like so...</p></div>
<div id="clear"></div>
</div>
</body>
</html>
The + adjacency selector would do it, except in IE6 where it isn't supported. The usual workaround would be to add some extra class information:
<div id="container" class="with-sidebar">
and then select on that in the stylesheet:
#sidebar { float: left; width: 130px; }
.with-sidebar #main { margin-left: 130px; }
This needs to expand to fill available width
Then don't bother make it float; I'm not sure what that's supposed to achieve.
Also avoid ‘inherit’ rules, they don't work in IE previous to version 8.
Final solution:
<!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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/* reset css */
* {
border: 0px none;
margin: 0;
padding: 0;
vertical-align: baseline;
font-size: 100%;
}
/* end reset */
#container {
margin: 0 auto;
width: 800px;
background-color: red;
}
#sidebar {
float: left;
width: 130px;
background-color: green;
}
#main {
background-color: blue;
}
.with-sidebar #main {
margin-left: 130px;
}
</style>
</head>
<body>
<div id="container" class="with-sidebar">
<div id="sidebar"><p>This is the side bar</p></div>
<div id="main"><p>This needs to expand to fill available width.</p></div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论