I am currently working on a website layout that consists of three sections positioned horizontally. I am aiming for the left division to take up 25% of the width, the middle one to occupy 50% of the width, and the right division to fill 25% of the width so that all divisions collectively span across 100% of the horizontal space.
<html>
<title>
Website Title
</title>
<div id="container" style="height:100%; width:100%" >
<div id="left" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="middle" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="right" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div;
</html>;
https://i.sstatic.net/NZDJe.jpg
Upon testing this code, the divs stack on top of each other instead of appearing next to one another. How can I remedy this issue?