to display div
inline....display:table
would be helpful instead of float
and also expands when there is no div
around
html, body {
width: 100%;
}
#columnContainer {
display:table; /* remove float and added this */
width: 100%;
border: 1px dotted black;
}
#left {
display:table-cell; /* remove float and added this */
min-width: 20%;
max-width: 100%;/* helps you expanding the divs after others collapse*/
display:table-cell;
border: 1px solid blue;
}
#main {
display:table-cell; /* remove float and added this */
min-width: 58%;
max-width: 100%; /* helps you expanding the divs after others collapse*/
border: 1px solid green;
}
#right {
display:table-cell; /* remove float and added this */
min-width: 20%;
max-width: 100%;/* helps you expanding the divs after others collapse*/
border: 1px solid blue;
}
Make sure to give max-width
...this will decide, how much a div should expand......