I am in the process of creating a basic website layout that resembles this design.
However, I am facing an issue where the webpage does not adapt well to different window sizes. Specifically, the elements with the classes .gameInfo and .playerList overlap when the window width is smaller than their combined widths, resulting in a messy layout like this screenshot.
It is important for me to ensure that the .gameInfo and .playerList sections remain parallel to each other regardless of the window size. Below is the code snippet I have been working on:
index.html:
<body>
<div id="container">
<div class="gameState">
</div>
<div class="gameInfo">
</div>
<div class="playerList">
</div>
</div>
</body>
style.css
body{
background-color: #FAF7F8;
font-family: "Calibri", sans-serif;
margin: 0px;
padding: 0px;
}
#container{
width: 89%;
margin: 0 auto;
}
.playerList{
float: right;
background-color: #EDEDED;
border: 1px solid;
border-color: #D4D4D4;
width: 123px;
height: 340px;
text-align: center;
font-size: 45px;
color: black;
}
.gameInfo{
float: left;
width: 89%;
background-color: #EDEDED;
border: 1px solid;
border-color: #D4D4D4;
height: 340px;
}
.gameState{
background-color: #EDEDED;
margin: 12px auto 12px auto;
border: 1px solid;
border-color: #D4D4D4;
width: 100%;
height: 64px;
text-align: center;
font-size: 45px;
color: black;
}