I am facing an issue with two divs in my HTML code. The right one is set to 80px wide while the other should fill up the remaining space. I have tried various CSS configurations but it seems that the right box always ends up below the left box instead of being positioned next to it.
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#left {
position: relative;
margin-right: 80px;
background-color: red;
}
#right {
float: right;
position: relative;
text-align: left;
width: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>
It seems like adjusting the margins or using negative values for margin-left did not produce the desired effect. Can someone please provide guidance on how to modify the CSS so that the right div appears alongside the left div?