My goal is to create a page layout with three DIVS arranged as Left|Center|Right, while still being able to display different combinations such as Center, Left|Center, or Center|Right in the center of a wrapper div.
I have been using jQuery toggle to switch between displaying either the Left, Right, or both DIVS off (display:none). However, I have encountered difficulties making this work smoothly. When I tried setting the DIVS as inline-block and used align-text: center, it resulted in unwanted formatting for the text inside the DIVS. On the other hand, floating all the DIVS left and adjusting the width of the wrapping div with margin: 0 auto; centered them only partially and added unnecessary margins. This caused one of the DIVS to go to the next line more quickly when resizing the browser compared to if the width was set to 100%.
For example, you can see my code in action at this JSFIDDLE.
HTML
<div id="wrapper">
<div id="left">ONE</div>
<div id="center">TWO</div>
<div id="right">THREE</div>
</div>
CSS
#wrapper{
width: 80%;
margin: 0 auto;
overflow: auto;
}
#left{
display: none;
width: 100px;
height: 100px;
background-color: #880000;
float: left;
}
#center{
width: 100px;
height: 100px;
background-color: #000088;
float: left;
}
#right{
width: 100px;
height: 100px;
background-color: #008800;
float: left;
}