I am trying to have three div elements in one row with different widths - one on the left, one in the center and one on the right.
- The left div should be 160px
- The center div should be 640px
- The right div should be 160px
My goal is for them to appear separate when viewed on a wide screen - one on the left, one in the center and one on the right.
However, when the user resizes the browser window or views the page on a smaller resolution, I want the divs to come closer together without collapsing (they should take up at least 960px altogether - 160 + 640 + 160).
So far, I have managed to achieve this with the help of StackOverflow and Google:
Html :
<div id="main">
<div id="leftDiv">left</div>
<div id="centerDiv">center</div>
<div id="rightDiv">right</div>
</div>
CSS:
#main {
overflow:hidden;
}
#main div {
width:33%;
float:left;
}
#leftDiv
{
width:160px;
}
}
#centerDiv {
text-align:center;
width:640px;
}
#rightDiv {
text-align:right;
width:160px;
}
If you can provide any further assistance, it would be greatly appreciated. Thank you in advance.