I am struggling with a seemingly simple issue that I can't seem to solve.
My goal is to create two boxes, one on the left and one on the right, each taking up 50% of the space and sitting beside each other.
Here is my current CSS code:
#left {
text-align: right;
width: 50%;
padding-right: 10%;
float: left;
}
#right {
width: 50%;
text-align: left;
padding-left: 10%;
}
#footer {
clear: both;
}
The corresponding HTML looks like this:
<div id='left'>
<h1>Left</h1>
<ul>
<li>Some Listing</li>
</ul>
</div>
<div id='right'>
<h1>Stuff</h1>
<p>
Stuff right
</p>
</div>
<div id='footer'>
</div>
Despite my efforts, the layout is not working as intended. However, the desired outcome is quite straightforward.