Sam Jefferies Sam Jefferies - 4 months ago 9
CSS Question

Stack divs ontop of each other

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

http://content.screencast.com/users/Workbookssam/folders/Jing/media/cf93215d-90b0-4286-9636-c6b924250358/2016-08-08_1242.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;
}

Answer

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