Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to coding, only been at it for six weeks. Can anyone help me understand why the layout is misbehaving?
div {
border: 1px solid black;
padding: 10px;
}
#head {
background-color: red;
height: 150px;
color: white;
font-size: 50px;
text-align: center;
}
#left {
display: inline-block;
width: 47%;
height: 300px;
overflow: auto;
}
#right {
display: inline-block;
width: 49%;
height: 300px;
float: right;
overflow: auto;
}
#footer {
height: 100px;
background-color: blue;
color: white;
}<div id="head"> The Daily Scumbag</div>
<div id="left">
<h1>This is left column.
</h1>
Lorem Vestibulum
</div>
<div id="right">