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

https://i.sstatic.net/dyTTZ.png

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

Displaying the contents of a local HTML file in a div

Tips for customizing the blinking cursor in a textarea

The radio button is displaying the text 'on' instead of its designated value

Include a navigation bar in the footer of my WordPress Theme's footer.php file

Tips for updating the background color of a dropdown menu in the navigation bar

Unable to create property within array in model

Change button to an ajax spinner when it is clicked using jQuery

Transitions fail to appear correctly when the page first loads

Background: Cover causing image to be cut off

Issues with the Textarea StartsWith Function Being Unresponsive

Disappearing PHP Session following a redirection

Toggle between list elements using the inner text of the elements with jQuery

The case of the elusive Firefox overflow: hidden glitch

ASP.NET ensures that the entire page is validated by the form

When I click the button, the page goes blank and keeps loading endlessly

Exploring characteristics using DocumentTraversal

Extracting information from console output and displaying it in a table with angular2

Rails: jQuery - page refreshes unexpectedly during event execution

What could be causing the Bootstrap icon to remain the same size without changing?

Choose an image to be displayed at either full width or full height, depending on which dimension is reached first