Styling Your Website with Horizontal Div Layout using CSS

Question

Styling Your Website with Horizontal Div Layout using CSS

Assuming I have a nest structure like this:

<div>
    <div></div>
    <div></div>
    <div></div>
    ...
</div>

Can a dynamic horizontal layout be achieved using just CSS?

In essence, the screen can only accommodate 2 vertical contents.

For instance, the screen can fit 3 vertical contents.

The body will display a horizontal scrollbar fixed at the bottom. When there is more content off-screen, it should flow left and move into a new column when the vertical space is filled. Any excess content should flow as indicated by the arrow.

Both screens must not show a vertical scrollbar. Is this possible without the need for JavaScript? I attempted using display: flex, but it did not produce the desired order effect mentioned above.

Please refer to the jsFiddle link: http://jsfiddle.net/W7z4s/10/ (Note that I want the .outer div to fill the body and show the scrollbar at the bottom)

It is imperative that this layout is supported on both Firefox and Chrome browsers!

html css

Answer 1

Answer №1

One strategy to achieve this involves utilizing the :nth-child selector for float clearing and incorporating media queries such as @media screen and (max-height: 700px) to determine when and how elements should be cleared based on varying heights.

Answer 2

One strategy to achieve this involves utilizing the :nth-child selector for float clearing and incorporating media queries such as @media screen and (max-height: 700px) to determine when and how elements should be cleared based on varying heights.

Answer 3

Answer №2

Attempting to utilize display: flex did not yield the desired order effect discussed earlier.

However, I found success with the following approach:

.outer {
    width:500px;
    height:500px;
    overflow:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

View updated fiddle

Please note that this solution may not currently work in Firefox due to lack of support for the flex-wrap property. However, based on data from caniuse, Firefox is expected to include support in version 28.

EDIT: (Updated FIDDLE with Firefox compatibility)

By using @supports, we can temporarily employ the -moz-colums-count for Firefox while waiting for flex-wrap support - a technique similar to Modernizr but purely through CSS.

The advantage here is that Firefox does support these queries.

Therefore, including the following code snippet:

@supports (not (flex-wrap: wrap)) and (-moz-columns: 4) {
    .outer { 
        -moz-column-count: 4;
        column-count: 4;
        display: block;
        width:120%;
    }
}

Now, Firefox will implement CSS columns while other browsers continue to use flexbox styling.

Answer 4

Attempting to utilize display: flex did not yield the desired order effect discussed earlier.

However, I found success with the following approach:

.outer {
    width:500px;
    height:500px;
    overflow:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

View updated fiddle

Please note that this solution may not currently work in Firefox due to lack of support for the flex-wrap property. However, based on data from caniuse, Firefox is expected to include support in version 28.

EDIT: (Updated FIDDLE with Firefox compatibility)

By using @supports, we can temporarily employ the -moz-colums-count for Firefox while waiting for flex-wrap support - a technique similar to Modernizr but purely through CSS.

The advantage here is that Firefox does support these queries.

Therefore, including the following code snippet:

@supports (not (flex-wrap: wrap)) and (-moz-columns: 4) {
    .outer { 
        -moz-column-count: 4;
        column-count: 4;
        display: block;
        width:120%;
    }
}

Now, Firefox will implement CSS columns while other browsers continue to use flexbox styling.

Answer 5

Answer №3

Although unconventional and messy, there is a way to achieve this layout by utilizing CSS transform properties. By rotating the parent div 90 degrees and then counter-rotating the child div, we can create vertical rows.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Vertical Rows - Unconventional Method</title>
<style>
html, body, .wrapper {
    background-color: #666;
    height:100%;
    width:100%;
    box-sizing:border-box;
}
.wrapper {
    padding: 50px;
    margin: 5%;
    height: 90%;
    width:90%;
    position: relative;
}
.container {
    position: absolute;
    left:15px;
    top: 15px;
    transform:rotate(-90deg);
}
.container div {
    width:150px;
    height: 150px;
    background-color: #ccc;
    float:right;
    margin: 20px;
    transform: rotate(90deg);
}
</style>
</head>

<body>
<div class="wrapper">
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
</div>
</div>
</body>
</html>

Answer 6

Although unconventional and messy, there is a way to achieve this layout by utilizing CSS transform properties. By rotating the parent div 90 degrees and then counter-rotating the child div, we can create vertical rows.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Vertical Rows - Unconventional Method</title>
<style>
html, body, .wrapper {
    background-color: #666;
    height:100%;
    width:100%;
    box-sizing:border-box;
}
.wrapper {
    padding: 50px;
    margin: 5%;
    height: 90%;
    width:90%;
    position: relative;
}
.container {
    position: absolute;
    left:15px;
    top: 15px;
    transform:rotate(-90deg);
}
.container div {
    width:150px;
    height: 150px;
    background-color: #ccc;
    float:right;
    margin: 20px;
    transform: rotate(90deg);
}
</style>
</head>

<body>
<div class="wrapper">
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
</div>
</div>
</body>
</html>

Styling Your Website with Horizontal Div Layout using CSS

Answer №1

Answer №2

EDIT: (Updated FIDDLE with Firefox compatibility)

Answer №3

Similar questions

When performing web scraping with Puppeteer, employing a single selector to target various types of data

How can we make sure the selected tab opens in jQuery tabbed content?

Malfunctioning carousel

What is the best method for determining the current value of an On/Off switch with labels for both states?

Ways to ensure that two divs have equal heights based on whichever one has the greater height using CSS

Utilize Bootstrap 4 to create a full screen desktop layout with columns that automatically adjust to

Unable to move to a different HTML page following validation with JavaScript

Guide to inserting an HTML file into an article's content

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

What is the method for manually setting the page_source in Python3 using Selenium?

Concerns regarding rendering HTML and drawing in Node.js

Guide on showcasing the values from two text fields with autocomplete suggestions in a third text field

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

What is the best way to ensure that my placeholder text remains permanent and properly formatted?

What is the best way to measure the timing of consecutive events within a web browser, utilizing JavaScript within an HTML script tag?

Issue with Bootstrap 5 justify-content causing misalignment and inability to vertically center content

Using Spring Boot RestController to Serve HTML Pages

Issue with Submitting Form in IE11 through Iframe with Jquery

Stop iframes from redirecting the parent page

What is the most efficient method for recursively cleaning HTML files on a drive?