Home/ Questions/Q 8969911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:39:37+00:00

I’m trying to design a simple webpage where the design looks like this .

  • 0

I’m trying to design a simple webpage where the design looks like this.

But 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.

Obviously 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:

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, you’re mixing fixed and percentage based widths, so I think this is a expected behaviour.

    If .gameInfo has 89% of the page, then .playerList will get at most 11%. The problem is that .playerList has a fixed width (123px), so, when that’s greater than the 11% of the page .gameInfo won’t fit side by side with it.

    Edit:
    This it’s a proper fluid-fixed layout:

    <body>
    <div id="container">
        <div class="gameState"></div>
        <div class="playerList"></div>
        <div class="gameInfo"></div>
    </div>
</body>​

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{
    margin-right: 130px;
    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;
}​
    • 0