Arrange divs in a stack fashion

Question

Arrange divs in a stack fashion

Currently, I have a table-styled three-column set of divs.

I would like these columns to stack vertically on mobile devices.

I think this can be achieved using the float method, but the titles and descriptions for each column are in separate rows (divs), so I am unsure how to accomplish this?

Intension

Fiddle https://jsfiddle.net/8tv35jLL/

HTML

<p><img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="/sites/default/files/pictures/Service-Desk-Team-heads-mini-min.png" title="The 2016 Workbooks Support Team" width="878" /></p>

<h4 style="text-align: left;">Please use the search tool above,&nbsp;the left-side menu or the links below to browse through our Knowledge Base.</h4>

<div class="rTable">
<div class="rTableBody">
<div class="rTableRow">
<div class="rTableCell">
<h4>New to Workbooks?</h4>
</div>

<div class="rTableCell">
<h4>Training videos</h4>
</div>

<div class="rTableCell">
<h4>System Admin</h4>
</div>
</div>

<div class="rTableRow">
<div class="rTableCell" style="border-right: 1px dashed grey;">Using Workbooks for the first time?</div>

<div class="rTableCell" style="border-right: 1px dashed grey;">Watch our short training videos to find out how to use Workbooks:</div>

<div class="rTableCell">System Administrator? Familiarise yourself with the following:</div>
</div>

<div class="rTableRow">
<div class="rTableCell" style="border-right: 1px dashed grey;">
<ul>
    <li class="nowrap"><a href="/help/introduction">Introduction to Workbooks</a></li>
    <li><a href="/help/navigation_and_editing">Workbooks Desktop</a></li>
    <li><a href="/help/importing">Importing Data</a></li>
</ul>
</div>

<div class="rTableCell" style="border-right: 1px dashed grey;">
<ul>
    <li class="nowrap"><a href="/help/training/videos#getting_started_with_workbooks_video">Getting started with Workbooks</a></li>
    <li class="nowrap"><a href="/help/training/videos#introduction_to_workbooks_outlook_connector_video">Workbooks Outlook Connector</a></li>
    <li class="nowrap"><a href="/help/importing">Introduction to Reporting</a></li>
</ul>
</div>

<div class="rTableCell">
<ul>
    <li><a href="/help/users/setting_up">Create new Users</a></li>
    <li class="nowrap"><a href="/help/own_organisation">Configure your Organisation</a></li>
    <li class="nowrap"><a href="/help/customising">Add Custom Fields</a></li>
</ul>
</div>
</div>
</div>
</div>

CSS

.rTable {
display: table;
width: 100%; 
} 

.content-section h4 {
text-align: center;
font-weight: 400;
margin: 0 0 0 0;
}

.content-section img {
margin-bottom: 0;
}

li.nowrap {
white-space: nowrap;
} 

.rTableRow {
display: table-row;
}

.rTableHeading {
display: table-header-group;
background-color: #ddd;
}

 .rTableCell, .rTableHead {
display: table-cell;
padding: 3px 10px;
} 

.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
} 

.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
} 

.rTableBody {
display: table-row-group;
}

html css

Answer 1

Answer №1

Check out the example

I had to specify specific widths for the cells in order to ensure they were properly sized. Feel free to delete rows and edit as needed to achieve a similar look.
Here is the CSS I used:

width: 250px

Answer 2

Check out the example

I had to specify specific widths for the cells in order to ensure they were properly sized. Feel free to delete rows and edit as needed to achieve a similar look.
Here is the CSS I used:

width: 250px

Answer 3

Answer №2

Implementing flexbox and media queries:

The initial layout is set in a row direction using flexbox, as shown on line 15.
You can structure the 3 columns with minimal elements, avoiding the need for a div for each one. Define the layout visually using margins, padding, and borders.
Utilize media queries to switch the layout when necessary. For instance, if the screen width is 600px or less, the flexbox properties change to display as a column (refer to line 25).

To observe how flexbox behaves, view the Snippet in Full Page mode and resize the window.

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    h4 {
      text-align: center;
      font-size: 2em;
    }
    p {
      font-size: 16px;
      margin: 0 10px 15px;
    }
    .flex {
      display: flex;
      justify-content: space-around;
      width: 100vw;
    }
    section {
      width: 30%;
      border-right: 1px dashed black;
      border-left: 1px dashed black;
    }
    @media only screen and (max-width: 600px) {
      .flex {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
      }
      section {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <main>
    <figure class="img">
      <img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="http://placehold.it/878x212/ace/001?text=The+2016+Workbooks+Support+Team" title="The 2016 Workbooks Support Team" width="100%" />
    </figure>
    <p>Please use the search tool above,&nbsp;the left-side menu or the links below to browse through our Knowledge Base.</p>
    <div class='flex'>
      <section>
        <h4>Title 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
        <ul>
          <li>Lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
        </ul>
      </section>
      <section>
        <h4>Title 2</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <ul>
          <li>Lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
        </ul>
      </section>
      <section>
        <h4>Title 3</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <ul>
          <li>Lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
        </ul>

      </section>
    </div>
  </main>
</body>

</html>

Answer 4

Implementing flexbox and media queries:

The initial layout is set in a row direction using flexbox, as shown on line 15.
You can structure the 3 columns with minimal elements, avoiding the need for a div for each one. Define the layout visually using margins, padding, and borders.
Utilize media queries to switch the layout when necessary. For instance, if the screen width is 600px or less, the flexbox properties change to display as a column (refer to line 25).

To observe how flexbox behaves, view the Snippet in Full Page mode and resize the window.

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    h4 {
      text-align: center;
      font-size: 2em;
    }
    p {
      font-size: 16px;
      margin: 0 10px 15px;
    }
    .flex {
      display: flex;
      justify-content: space-around;
      width: 100vw;
    }
    section {
      width: 30%;
      border-right: 1px dashed black;
      border-left: 1px dashed black;
    }
    @media only screen and (max-width: 600px) {
      .flex {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
      }
      section {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <main>
    <figure class="img">
      <img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="http://placehold.it/878x212/ace/001?text=The+2016+Workbooks+Support+Team" title="The 2016 Workbooks Support Team" width="100%" />
    </figure>
    <p>Please use the search tool above,&nbsp;the left-side menu or the links below to browse through our Knowledge Base.</p>
    <div class='flex'>
      <section>
        <h4>Title 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
        <ul>
          <li>Lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
        </ul>
      </section>
      <section>
        <h4>Title 2</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <ul>
          <li>Lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
        </ul>
      </section>
      <section>
        <h4>Title 3</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <ul>
          <li>Lorem</li>
          <li>ipsum</li>
          <li>dolor</li>
        </ul>

      </section>
    </div>
  </main>
</body>

</html>

Answer 5

Answer №3

Your implementation of div doesn't seem to be achieving the desired result. Check out the code snippet below:

.container{
  padding:0;
  padding:0;
}
.box{
  margin:0;
  padding:0 .5em 0;
  width:30%;
  float:left;  
}
.box h3{
  margin:0;
  padding:0;  
}
.box div{
    border-right:2px dotted #ccc;
    min-height:200px
}

@media(max-width:598px){
  .box{
    width:100%;
    
  }
  .box div{
    border-bottom:2px dotted #ccc;
    min-height:0px;
 }

<div class="container">
  <div class="box">
    <h3>New to Workbooks?</h3>
    <div>
        <p>Using Workbooks for the first time?</p>
    </div>
  </div>
  <div class="box">
    <h3>Training videos</h3>
    <div>
     <p>Watch our short training videos to find out how to use Workbooks:</p>
      </div>
  </div>
  <div class="box">
    <h3>System Admin</h3>
    <div>
      <p> System Administrator? Familiarise yourself with the following:</p></div>
  </div>
</div>

Test the responsiveness by changing the browser size.

Answer 6

Your implementation of div doesn't seem to be achieving the desired result. Check out the code snippet below:

.container{
  padding:0;
  padding:0;
}
.box{
  margin:0;
  padding:0 .5em 0;
  width:30%;
  float:left;  
}
.box h3{
  margin:0;
  padding:0;  
}
.box div{
    border-right:2px dotted #ccc;
    min-height:200px
}

@media(max-width:598px){
  .box{
    width:100%;
    
  }
  .box div{
    border-bottom:2px dotted #ccc;
    min-height:0px;
 }

<div class="container">
  <div class="box">
    <h3>New to Workbooks?</h3>
    <div>
        <p>Using Workbooks for the first time?</p>
    </div>
  </div>
  <div class="box">
    <h3>Training videos</h3>
    <div>
     <p>Watch our short training videos to find out how to use Workbooks:</p>
      </div>
  </div>
  <div class="box">
    <h3>System Admin</h3>
    <div>
      <p> System Administrator? Familiarise yourself with the following:</p></div>
  </div>
</div>

Test the responsiveness by changing the browser size.

Answer 7

Answer №4

If you want to create a responsive layout that adapts to different screen sizes, you can achieve this using CSS media queries. The concept is to have a standard design for devices with smaller screens that do not support CSS3 (resulting in vertical stacking), and a different design for larger screens that do support CSS3 (allowing for horizontal stacking). This approach is commonly used by many websites to ensure a consistent user experience across all devices:

Here's how it works: CSS

.container {
    width:1200px;
    margin: 0 auto;
}
.leftDiv {
    background-color:blue;
    width: 400px;
    height:200px;
}
.rightDiv {
    background-color:green;
    width: 400px;
    height:200px;
}
.centreDiv {
    width: 400px;
    height:200px;
    background-color: yellow;
}

@media only screen and (min-width:883px) {
    .leftDiv {
        float:left;
    }
    .centreDiv {
        float:left;
    }
    .rightDiv {
        float:right;
    }
}

And the HTML:

<div class="container">
<div class="leftDiv">Left</div>
<div class="centreDiv">Centre</div>
<div class="rightDiv">Right</div></div>

Answer 8

If you want to create a responsive layout that adapts to different screen sizes, you can achieve this using CSS media queries. The concept is to have a standard design for devices with smaller screens that do not support CSS3 (resulting in vertical stacking), and a different design for larger screens that do support CSS3 (allowing for horizontal stacking). This approach is commonly used by many websites to ensure a consistent user experience across all devices:

Here's how it works: CSS

.container {
    width:1200px;
    margin: 0 auto;
}
.leftDiv {
    background-color:blue;
    width: 400px;
    height:200px;
}
.rightDiv {
    background-color:green;
    width: 400px;
    height:200px;
}
.centreDiv {
    width: 400px;
    height:200px;
    background-color: yellow;
}

@media only screen and (min-width:883px) {
    .leftDiv {
        float:left;
    }
    .centreDiv {
        float:left;
    }
    .rightDiv {
        float:right;
    }
}

And the HTML:

<div class="container">
<div class="leftDiv">Left</div>
<div class="centreDiv">Centre</div>
<div class="rightDiv">Right</div></div>

Answer 9

Answer №5

To achieve this layout, consider utilizing Bootstrap. Bootstrap offers a convenient way to style your webpage dynamically using a row/column structure. Visit the Bootstrap site for further details. It is recommended to opt for a row layout that seamlessly adjusts on mobile screens. Refer to this fiddle for a practical example.

<div class="row">
  <div class="col-md-4">
    <h2>
New to workbooks?
</h2>
    <br />
    <p>
      Are you new to using workbooks?
    </p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>

  </div>
  <div class="col-md-4">
    <h2>
System Admin
</h2>
    <br />
    <p>
      Get acquainted with system admin tasks
    </p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>
  </div>
  <div class="col-md-4">
    <h2>Training videos</h2>
    <br />
    <p>Explore our training video library</p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>
  </div>
</div>

Answer 10

To achieve this layout, consider utilizing Bootstrap. Bootstrap offers a convenient way to style your webpage dynamically using a row/column structure. Visit the Bootstrap site for further details. It is recommended to opt for a row layout that seamlessly adjusts on mobile screens. Refer to this fiddle for a practical example.

<div class="row">
  <div class="col-md-4">
    <h2>
New to workbooks?
</h2>
    <br />
    <p>
      Are you new to using workbooks?
    </p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>

  </div>
  <div class="col-md-4">
    <h2>
System Admin
</h2>
    <br />
    <p>
      Get acquainted with system admin tasks
    </p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>
  </div>
  <div class="col-md-4">
    <h2>Training videos</h2>
    <br />
    <p>Explore our training video library</p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>
  </div>
</div>

Answer 11

Answer №6

This approach may not be the best, but it should work for you.

HTML

<p><img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="/sites/default/files/pictures/Service-Desk-Team-heads-mini-min.png" title="The 2016 Workbooks Support Team" width="878" /></p>

<h4 style="text-align: left;">Please use the search tool above,&nbsp;the left-side menu or the links below to 
<div class="rTableRow">
<div class="cell">
<h4>New to Workbooks?</h4>
<div style="border-right: 1px dashed grey;">Watch our short training videos to find out how to use Workbooks:</div>
<ul>
    <li class="nowrap"><a href="/help/introduction">Introduction to Workbooks</a></li>
    <li><a href="/help/navigation_and_editing">Workbooks Desktop</a></li>
    <li><a href="/help/importing">Importing Data</a></li>
</ul>
</div>

<div class="cell">
<h4>Training videos</h4>
<div style="border-right: 1px dashed grey;">Using Workbooks for the first time?</div>
<ul>
    <li class="nowrap"><a href="/help/training/videos#getting_started_with_workbooks_video">Getting started with Workbooks</a></li>
    <li class="nowrap"><a href="/help/training/videos#introduction_to_workbooks_outlook_connector_video">Workbooks Outlook Connector</a></li>
    <li class="nowrap"><a href="/help/importing">Introduction to Reporting</a></li>
</ul>
</div>

<div class="cell">
<h4>System Admin</h4>
<div>System Administrator? Familiarise yourself with the following:</div>
<ul>
    <li><a href="/help/users/setting_up">Create new Users</a></li>
    <li class="nowrap"><a href="/help/own_organisation">Configure your Organisation</a></li>
    <li class="nowrap"><a href="/help/customising">Add Custom Fields</a></li>
</ul>
</div>
</div>

CSS

.rTable {
    display: table;
    width: 100%; 
} 

.content-section h4 {
    text-align: center;
    font-weight: 400;
    margin: 0 0 0 0;
}

.content-section img {
    margin-bottom: 0;
}

li.nowrap {
    white-space: nowrap;
} 

.cell {
    float:left;
    min-width:300px;
    width:30%;
    padding: 3px 10px;
    height:200px;
}

No need to make divs act like tables. Use float to show them side by side and set a minimum width to ensure they stack vertically when needed. Including a height value helps prevent overlap issues. Hopefully, this solution works for you!

Answer 12

This approach may not be the best, but it should work for you.

HTML

<p><img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="/sites/default/files/pictures/Service-Desk-Team-heads-mini-min.png" title="The 2016 Workbooks Support Team" width="878" /></p>

<h4 style="text-align: left;">Please use the search tool above,&nbsp;the left-side menu or the links below to 
<div class="rTableRow">
<div class="cell">
<h4>New to Workbooks?</h4>
<div style="border-right: 1px dashed grey;">Watch our short training videos to find out how to use Workbooks:</div>
<ul>
    <li class="nowrap"><a href="/help/introduction">Introduction to Workbooks</a></li>
    <li><a href="/help/navigation_and_editing">Workbooks Desktop</a></li>
    <li><a href="/help/importing">Importing Data</a></li>
</ul>
</div>

<div class="cell">
<h4>Training videos</h4>
<div style="border-right: 1px dashed grey;">Using Workbooks for the first time?</div>
<ul>
    <li class="nowrap"><a href="/help/training/videos#getting_started_with_workbooks_video">Getting started with Workbooks</a></li>
    <li class="nowrap"><a href="/help/training/videos#introduction_to_workbooks_outlook_connector_video">Workbooks Outlook Connector</a></li>
    <li class="nowrap"><a href="/help/importing">Introduction to Reporting</a></li>
</ul>
</div>

<div class="cell">
<h4>System Admin</h4>
<div>System Administrator? Familiarise yourself with the following:</div>
<ul>
    <li><a href="/help/users/setting_up">Create new Users</a></li>
    <li class="nowrap"><a href="/help/own_organisation">Configure your Organisation</a></li>
    <li class="nowrap"><a href="/help/customising">Add Custom Fields</a></li>
</ul>
</div>
</div>

CSS

.rTable {
    display: table;
    width: 100%; 
} 

.content-section h4 {
    text-align: center;
    font-weight: 400;
    margin: 0 0 0 0;
}

.content-section img {
    margin-bottom: 0;
}

li.nowrap {
    white-space: nowrap;
} 

.cell {
    float:left;
    min-width:300px;
    width:30%;
    padding: 3px 10px;
    height:200px;
}

No need to make divs act like tables. Use float to show them side by side and set a minimum width to ensure they stack vertically when needed. Including a height value helps prevent overlap issues. Hopefully, this solution works for you!

Arrange divs in a stack fashion

Answer №1

Answer №2

SNIPPET

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Substitute the information in the table with new data

Setting size using percentages in Semantic-UILet's explore how to define the size

switching the content of an element using Javascript

Generating numerous variables simultaneously is a feature of SASS

Tips for creating a navigation system that combines both horizontal and vertical bars

PHTML file IIS handler

When the div element reaches the top of the page, it sticks to the top and is only displayed when the user

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Inheriting the viewBox attribute with SvgIcon

Adding turbolinks to an HTML document can be achieved without the need for a

What is the best way to align the items in the center of this container?

Locate the present position of the slider element

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

Using JavaScript, append a hidden input field in Yii2 and retrieve it from the controller

How can I apply specific styling to certain cells within a table?

Set the height of the main div container to a fixed size

Struggling with identifying errors in the Javascript code for my assignment

Show data from a Mysql table column in a dropdown menu

Is it possible to alter preact-material-components to switch to mdc-theme--dark mode, thereby changing the CSS style of all descendant components?

Styling Drawn Elements on a Canvas Using CSS