Stack divs ontop of each other
Question
I currently have a three column set of divs styled as a table.
I'd like these three columns to stack vertically on a mobile device.
I believe this maybe possible using the float method, however the titles and description for each column appear in seperate rows (divs) so I'm not sure how to make this happen?
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, 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;
}
6 answers
solution1
1 ACCPTED 2016-08-08 11:59:46
See fiddle
I had to set explicit width's for the cells, so that they were sized appropriately. You can remove the rows and make the necessary changes to have the same style.
I used
width: 250px
solution2
1 2016-08-08 12:24:34
Use flexbox and media queries:
- Start layout in a row direction with flexbox see line 15.
- The 3 columns can be only a few elements each, no need to have a div for everything. Use margins, padding, and borders to define structure visibly.
- Use media queries to trigger a change in layout. In this example, if the screen is 600px or less in width, the flexbox properties change to flow as a column see line 25.
View the Snippet in Full Page mode and resize to so flexbox in action.
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, 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>
solution3
0 2016-08-08 12:01:39
The way you are using div seems like it won't be possible to get what you want. Here the code 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>
Try changing the browser size for the responsive design.
solution4
0 2016-08-08 12:05:19
You can easily do that with css media queries. The idea is to keep a standard design for all devices that have a might not have a big screen and not support css3 (the vertical stacking in your case) and another design to stack them horizontally for bigger screens with css3 support. A lot of websites follow a similar approach. No matter what device your users have, you'll always be on the safe side:
It works like this: CSS
.container {
width:1200px;
margin: 0px 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>
solution5
0 2016-08-08 12:07:35
For this use can use Bootstrap. Bootstrap allows you to easily and dynamically style your page using a row/column layout. Please see the Bootstrap site for more information. What you want here is a row layout that will automatically stack on mobile sizing. Please see this fiddle for an example
<div class="row">
<div class="col-md-4">
<h2>
New to workbooks?
</h2>
<br />
<p>
Using workbooks for the first time?
</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>
Familiarise yourself
</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>Watch out short videos</p>
<ul>
<li>link 1</li>
<li>link 3</li>
<li>link 2</li>
</ul>
</div>
</div>
solution6
0 2016-08-08 12:18:07
This should work out for you not the best approach maybe but it will work.
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, 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;
}
You dont need to make div's act like they are tables. You can use float to show them side by side. And with min width you can make sure they will get under each other when minimum value is reached. I gave height value too because of when divs get under each other if float is left and the div on the left has more height than the div on the middle, the div on the right side will stuck under the middle one. I don't know if i could express myself good but hope this work out for you :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.