In a 2-column layout, how do I make one column expand to total width if I remove the other column?
Better explained with a markup:
HTML:
开发者_如何学Go<div><!--both sidebar and content share width-->
<div id="content"><!--maybe at 30%-->
</div>
<div id="sidebar"><!--may be at 70%-->
</div>
</div>
CSS:
#sidebar{float:left;} /* no idea what width*/
#content{float:right;} /* no idea what width*/
What I want to do is that if the sidebar is not present in the markup, the content div expands to take the place of the sidebar:
<div>
<div id="content"><!--width now at 100%-->
</div>
</div>
A pure CSS method will be using CSS table-layout:
CSS:
#wrapper{
display: table;
width: 100%;
}
#content {
display: table-cell;
width: auto;
}
#sidebar {
display: table-cell;
width: 30%;
}
HTML:
<div id="wrapper"><!--both sidebar and content share width-->
<div id="content"><!--maybe at 30%-->content
</div>
<div id="sidebar"><!--may be at 70%-->sidebar
</div>
</div>
The above however will not work for older browsers like IE6/7 etc. Using javascript (as mentioned by other answers to this post) as a fallback will be ideal.
You can acheive this if you flip your divs around like so:
<!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="text/html; charset=utf-8" />
<title>Fluid Columns</title>
<style type="text/css">
<!--
div{height:100px; margin-bottom: 50px; color: #fff;}
#sidebar{float:left;background: red;} /* no idea what width*/
#content{background: blue;} /* no idea what width*/
-->
</style>
</head>
<body>
<div><!--both sidebar and content share width-->
<div id="sidebar"><!--may be at 30%-->
Sidebar
</div>
<div id="content"><!--maybe at 70%-->
Partial Width
</div>
</div>
<div>
<div id="content"><!--width now at 100%-->
Whole Width
</div>
</div>
</body>
</html>
The only drawback with this approach is that you will need to know how wide your sidebar is if you want to add any padding to your content div. That's fixable, but as that wasn't really your question, I won't tell you how to suck eggs, I'm sure you can work it out ;)
This one is tricky:
If you set the width on the sidebar, float it, and don't set the width on the content (also, don't float the content either as this will cause the div to "shrink-wrap"). Then the column will behave like you desired.
#content { width: auto; display:block } /* not really necessary as these are default */
#sidebar { width: 30%; float: right }
I'd like to add that this is intrinsically flaky and often limiting. Your best bet is, if you control the layout on the server side (you've got some script that generates layouts) then append css classes to the document before it's rendered.
A pure html solution is possible, but it also relies on this particular behavior. If you want to float the #content div, it won't work (because you'll be forced to specify the dimensions to avoid the shrink wrapping effect).
You can also do this using javascript. The thing to watch out for there is you might get a FOUC (flash of unstyled content) as the javascript kicks in.
With jQuery you could do something like count the adjacent divs i.e.
jQuery('#content').nextAll().length
Then use the result to do something like:
jQuery('#content').addClass('has_sidebar').
Function:
<script type='text/javascript'>
/**** Minimising ****/
function Minimise()
{
document.getElementById('FirstColumn').style.width = '0%';
document.getElementById('SecondColumn').style.width = '100%';
}
/**** Expanding ****/
function Maximise()
{
document.getElementById('FirstColumn').style.width = '50%';
document.getElementById('SecondColumn').style.width = '50%';
}
</script>
To run the function
<a href="javascript:Minimise();">Click here to minimise column1 etc</a>
Then you can always add in style block to hide all content or whatever you need to do also. You could also use a toggle but this way can work really nice using div's. However you want to go about it really.
Check out this technique:
http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/
It's very flexible and does not require server side code. IMO things should be separated, server side - for server side tasks, front end - for front end tasks.
Good Luck
加载中,请稍侯......
精彩评论