I need to align 3 divs in a specific way on my webpage. One should be on the left side taking up 25% of the window, one on the right side also taking up 25%, and the last one in the center taking up the remaining space. I'm struggling with how to achieve this layout.
Here is what I've attempted so far :
html:
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
css:
#left {
border: 2px solid blue;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 25%;
}
#right {
border: 2px solid blue;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 25%;
}
#center {
border: 2px solid red;
position: absolute;
right: 25%;
top: 0px;
bottom: 0px;
width: 50%;
}