Is it possible to place two grid side by side? - html

Question

So here is my problem. I use some ui-grid on my interface to show information, but I would like to have 2 grid of 3 columns side by side (aligned vertically). So far, I haven't found exemple of it and i tried to code it, but without success. Is there someone here with better experience then me who knows how its possible? So far, that's what i thought about the solution :
<ul data-role="listview" data-inset="true" data-icon="false">
<li data-role="list-divider">
<div class="ui-grid-b" style="width: 50%">
<div class="ui-block-a">Header 1</div>
<div class="ui-block-b">Header 2</div>
<div class="ui-block-c">Header 3</div>
</div>
<div class="ui-grid-b" style="width: 50%; float: right">
<div class="ui-block-a">Header 1</div>
<div class="ui-block-b">Header 2</div>
<div class="ui-block-c">header 3</div>
</div>
</li>
</ul>
I just try to get two table side by side like this one:https://jsfiddle.net/8o39tqgz/1/
EDIT
Just tried display: inline, but it doesn't work on the same line... https://jsfiddle.net/s71zpcgs/

Answer 1

How about this?
<ul data-role="listview" data-inset="true" data-icon="false">
<li data-role="list-divider">
<div class="ui-grid-b" style="width: 50%; float: left">
<div class="ui-block-a column" >Header 1</div>
<div class="ui-block-b column" >Header 2</div>
<div class="ui-block-c column" >header 3</div>
</div>
<div class="ui-grid-b" style="width: 50%; float: left">
<div class="ui-block-a column" >Header 1</div>
<div class="ui-block-b column" >Header 2</div>
<div class="ui-block-c column" >header 3</div>
</div>
</li>
</ul>
And then at your css add this
.column{
width:33%;
float:left;
/* you can optionally set a fixed height */
}

Answer 2

I guess its not exactly what I wanted, but that will do it. Ty to #ezanker for the solution :
HTML
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-icon="false" class="gridUL">
<li data-role="list-divider">
<div class="ui-grid-a bothGrids">
<div class="ui-block-a">
<table class="halfGrid" style="width: 98%" >
<thead>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
</thead>
<tbody>
<tr><td>content 1</td><td>Some bigger content in this cell</td><td>content 3</td></tr>
<tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
</tbody>
</table>
</div>
<div class="ui-block-b ">
<table class="halfGrid" style="width: 98%">
<thead>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
</thead>
<tbody>
<tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
<tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
</tbody>
</table>
</div>
</div>
</li></ul>
</div>
</div>
CSS
.halfGrid {
margin-left: 1%;
margin-right: 1%;
border-spacing: 0;
border-collapse: collapse;
}
.halfGrid td, .halfGrid th {
border: 1px solid #aaa;
padding: 4px;
text-align: center;
width: 33%;
font-weight: normal;
white-space: normal;
}
.halfGrid th {
font-weight: bold;
}
IMPORTANT EDIT
Actually, I got the idea of splitting the screen in two and wrap one table in each side and that work exactly as I wanted! Im so happy, I was working on it for many hours... Felt like running in circle, but its finally done! Here is the code :
HTML
<div class="wrap">
<div class="fleft">
<ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">PN</div>
<div class="ui-block-b" style="width:34%">Amendment</div>
<div class="ui-block-c" style="width:33%">Designation</div>
</div>
</li>
<!-- Data found -->
<li>
<a href="javascript:alert('Hello world');">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Info1</div>
<div class="ui-block-b" style="width:34%">Info2</div>
<div class="ui-block-c" style="width:33%">Info3</div>
</div>
</a>
</li>
</ul>
</div>
<div class="fright">
<ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">PN</div>
<div class="ui-block-b" style="width:34%">Amendment</div>
<div class="ui-block-c" style="width:33%">Designation</div>
</div>
</li>
<!-- Data found -->
<li>
<a href="javascript:alert('Hello world');">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Info1</div>
<div class="ui-block-b" style="width:34%">Info2</div>
<div class="ui-block-c" style="width:33%">Info3</div>
</div>
</a>
</li>
</ul>
</div>
</div>
CSS
.wrap
{
width: 100%;
overflow:auto;
padding:2px;
}
.fleft
{
float:left;
width: 50%;
}
.fright
{
float: right;
width: 50%;
}
Found solution in this post : Split page vertically using CSS and integrated the part of my code. Here is the jsfiddle : http://jsfiddle.net/G6N5T/1211/

Answer 3

You could nest two 3 column grids within one 2 column grid:
<ul data-role="listview" data-inset="true" data-icon="false" class="gridUL">
<li data-role="list-divider">
<div class="ui-grid-a bothGrids">
<div class="ui-block-a">
<div class="ui-grid-b halfGrid">
<div class="ui-block-a cell">header 1</div>
<div class="ui-block-b cell">header 2</div>
<div class="ui-block-c cell">header 3</div>
</div>
</div>
<div class="ui-block-b ">
<div class="ui-grid-b halfGrid">
<div class="ui-block-a cell">Header 1</div>
<div class="ui-block-b cell">Header 2</div>
<div class="ui-block-c cell">header 3</div>
</div>
</div>
</div>
</li>
</ul>
.halfGrid {
margin-left: 1%;
margin-right: 1%;
}
.halfGrid .cell {
border: 1px solid #aaa;
padding: 4px;
text-align: center;
}
Updated FIDDLE