pabNaliaduddY
New Member
I'm trying to design a simple webpage where the design looks like this:http://i.stack.imgur.com/OLLfS.jpgBut I'm also trying to make the website fit on windows of almost any size, and when that happens the .gameInfo class jumps on top of the .playerList class when the window size is smaller than the width of those two combined, so the result ends up looking like this:http://i.stack.imgur.com/APHBk.pngObviously this looks very ugly and my goal is to try to make .gameInfo and .playerList as parallel as possible. My following code looks like this:\[quote\] index.html (everything in the head tag has been taken out for simplicity's sake):\[/quote\]\[code\] <body> <div id="container"> <div class="gameState"> </div> <div class="gameInfo"> </div> <div class="playerList"> </div> </div></body>\[/code\]\[quote\] style.css:\[/quote\]\[code\]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;}\[/code\]