Home/ Questions/Q 3619090
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:50:05+00:00

I have a simple HTML page with 3 columns (300px x 100%) that all

  • 0

I have a simple HTML page with 3 “columns” (300px x 100%) that all have a vertical scrollbar. This works fine when having a window of at least 900 pixels in width. However, when I resize the window to be smaller than the columns take, one (or more) of the columns jump down to fit the window vertically. This is not what I want, because it would require the user to scroll all the way down before being able to see the other column.

What I want is pretty simple: a way to force the browser to fit the columns horizontally, even if it doesn’t fit. width: 900px; on the body isn’t a solution I want to use because the number of columns (and their width) is variable.

In other words: how do I force a browser to put my elements horizontally on a page and stop moving elements?

[edit]
My current code (well, it’s not the actual code, but it does show what the problem is):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body, html {
                height: 100%;
            }

            body {
                overflow-x: scroll;
            }

            .column {
                width: 300px;
                height: 100%;
                float: left;
                overflow-x: hidden;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html>
<html>
  <head>
    <style>
      * { margin: 0px; padding: 0px; }

      body, html { height: 100%; }

      body { 
        overflow-x: scroll; 
        white-space: nowrap; // prevent 'text' from wrapping
      }

      .column {
        display:inline-block; // make them behave like 'text'
        width: 300px; height: 100%;

        overflow-x: hidden; overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </body>
</html>
    • 0