CSS flex get the same behaivor as table - css

I'm trying to use flexbox to get the same behavior as a table. For example:
<div>
<div class="flex row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="flex row">
<p>Very long text</p>
<p>Text </p>
</div>
</div>
How can I get the rows to be on the same vertical line as a table?
So basically I'm trying to achieve the following result with flexbox
<table>
<tr>
<td>Short text</td>
<td>Text</td>
</tr>
<tr>
<td>Very long text</td>
<td>Text</td>
</tr>
</table>


Not using flexbox given your HTML structure.
If you want table behaviour, using divs, use CSS Tables.
A comparison for you.
table {
border-collapse: collapse;
margin-bottom: 1em;
}
td {
border: 1px solid grey;
padding: 1em;
background: lightgreen;
}
.table {
display: inline-table;
}
.row {
display: table-row;
}
p {
display: table-cell;
padding: 1em;
border: 1px solid grey;
background: lightblue;
}
<table>
<tr>
<td>Short text</td>
<td>Text</td>
</tr>
<tr>
<td>Very long text</td>
<td>Text</td>
</tr>
</table>
<div class="table">
<div class="row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="row">
<p>Very long text</p>
<p>Text </p>
</div>
<div>


.row {
display: flex;
justify-content: space-around;
align-items: center;
}
.row p { width: 100% }
<div class="table">
<div class="flex row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="flex row">
<p>Very long text</p>
<p>Text </p>
</div>
</div>

Related

convert table to div as per bootstrap v4 beta

I am using bootstrap v4 beta. I have created a table. How can i create the same table using div.
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th class="text-center"><b>Id</b></th>
<th class="text-center"><b>Name</b></th>
<th class="text-center"><b>Munit</b></th>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td class="text-center"> 294</td>
<td class="text-center"> nimai</td>
<td class="text-center"> kg</td>
</tr>
<tr>
<td> 2</td>
<td class="text-center"> 200</td>
<td class="text-center"> nitai</td>
<td class="text-center"> kg</td>
</tr>
</tbody>
</table>
</div>
I also want the same format it looks like in the below picture:

You can make that easily using flexbox
.table {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.table-row {
width: 100%;
height: 10vw;
display: flex;
border-bottom: 1px solid #ccc;
}
.table-header {
font-weight: bold;
}
.table-row div:first-child {
width: 10% !important;
}
.table-row-column {
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="table">
<div class="table-row table-header">
<div class="table-row-column table-row-index">#</div>
<div class="table-row-column table-center">Id</div>
<div class="table-row-column table-center">Name</div>
<div class="table-row-column table-center">Munit</div>
</div>
<div class="table-row">
<div class="table-row-column table-row-index">1</div>
<div class="table-row-column table-center">294</div>
<div class="table-row-column table-center">nimai</div>
<div class="table-row-column table-center">kg</div>
</div>
<div class="table-row">
<div class="table-row-column table-row-index">2</div>
<div class="table-row-column table-center">200</div>
<div class="table-row-column table-center">nitai</div>
<div class="table-row-column table-center">kg</div>
</div>
</div>
</div>

Try this
.col {
display: inline-block;
}
row {
display: block;
}
<div class="row">
<div class="col">
<div>First column</div>
<div> 1</div>
<div> 2</div>
<div>3</div>
</div>
<div class="col">
<div>Second column</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="col">
<div>Third column</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Bootstrap 4 horizontal scroller div

I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.
Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't want): DEMO
The same code for Bootstrap 4 isn't working though! Here's the JSFiddle for Bootstrap 4: https://jsfiddle.net/6kvw2q5h/
HTML
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>
CSS
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
What am I doing wrong? I'm at wits end.

HTML
<div class="container testimonial-group">
<div class="row text-center flex-nowrap">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
<div class="col-sm-4">7</div>
<div class="col-sm-4">8</div>
<div class="col-sm-4">9</div>
</div>
</div>
CSS
/* The heart of the matter */
.testimonial-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-sm-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-sm-4:nth-child(3n+1) { background: #c69; }
.col-sm-4:nth-child(3n+2) { background: #9c6; }
.col-sm-4:nth-child(3n+3) { background: #69c; }
NOTE : codepen

I think you need to remove the flexbox functionality of the .row so add:
.live__scroll .row{
display:block;
}
So it should look like the following:
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .row{
display:block;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>

horizontal scoll bar using bootstrap 4
In table
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>bharti</td>
<td>parmar</td>
<td>422</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
In navigation bar
<div class="scrollmenu">
Home
News
Contact
About
Support
Home
News
Contact
About
Support
Home
News
Contact
About
Support
</div>
css code
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}

Align CSS content

I have the following panel:
And what I want is to centralize the circle charts inside the td of my table and keep it centralized when it turns to mobile. I'm having some issues trying to do that. This is how my code is:
<div class="portlet-body row">
<div class="col-lg-12">
<h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p100 orange big">
<span>100%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>PISO</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p82 big">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>META</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p63 green big">
<span>63%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>SUPERMETA</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
</div>
There are some classes but I'm not using them by now.
Link to codepen: http://codepen.io/anon/pen/apNrxy
Any suggestion? Thanks!

It's easy to do if you can leverage flexbox (See browser compatibility here).
If you're using Bootstrap version 4, you can just wrap the content with:
<div class="d-flex justify-content-around">...</div>
See the documentation for more information.
If you're using Bootstrap version 3, you can still use the flexbox styles directly:
display: flex;
justify-content: space-around;

Update your CSS to this
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
/* float: left; */
margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
background-color: #cccccc;
}

how do I Center images with text under and above using html and css?

Hello I'm new to html & css and I have a question. I'm trying to display 4 images in the center of a box next to eacht other. I'm currently using tables but that gives a lot of code in my html & css:
css:
/*box*/
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
/*table*/
table{
margin-right: auto;
margin-left: auto;
display: inline-block;
}
td,th{
padding: 20px;
}
and then way to much html:
<div id="content2">
<h4>Onze producten</h4>
<table>
<tr>
<td> Pika deken</td>
</tr>
<tr>
<td><img src="../images/baby1.jpg"></td>
</tr>
<tr>
<td>€20</td>
</tr>
</table>
<table>
<tr>
<td>School outfit</td>
</tr>
<tr>
<td><img src="../images/boy1.jpg"></td>
</tr>
<tr>
<td>€140</td>
</tr>
</table>
<table>
<tr>
<td>Bussines girl</td>
</tr>
<tr>
<td><img src="../images/girl2.jpg"></td>
</tr>
<tr>
<td>€250</td>
</tr>
</table>
<table>
<tr>
<td>Summer</td>
</tr>
<tr>
<td><img src="../images/girl1.jpg"></td>
</tr>
<tr>
<td>€99.99</td>
</tr>
</table>
</div>
Is there any way to do this more effciently ?
The design has to stay liquid.
Thanks in advance

max. simplified (ok, we could use img captions, too)
http://jsfiddle.net/EpyUb/
HTML
<div id="content2">
<h4>Onze producten</h4>
<div class="container">
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
</div>
</div>
CSS
.product {display: inline-block;}
.product img {display: block;}

You can try something like this:
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
and css:
#content2{
margin: 30px auto;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
display: block;
padding-bottom: 10px;
}
example here:
http://jsfiddle.net/thespacebean/xGqDE/

HTML/CSS: floating divs height and bottom vertical align

I can't make HTML layout described as in jsFiddle link below, using <div> and CSS float. With table tag I can solve this problem, but I need DIV+CSS solution. It's possible? Anyone can help?
HTML:
<div class="container">
<div class="column">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div>
Something on top
</div>
<div id="bottom-content" style="background-color: #FA0">
Something with vertical align = bottom AND height == height of left column
</div>
</div>
CSS:
.container {
overflow: hidden;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
Live demo: jsFiddle
Solution:
HTML:
<div class="container">
<div class="column">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="float:left; height:82px">
Something on top
</div>
<div id="bottom-content" style="background-color: #FA0; float:left;">
Something with vertical align = bottom AND height == height of left column
</div>
</div>
CSS:
.container {
overflow: hidden;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}

The layout(i.e. https://dl.dropbox.com/u/2325784/example_layout.png) can be achieved with the following code I guess:
.container {
width:900px;
overflow: hidden;
}
.picture{
float:left;
width:220px;
}
.column {
width:320px;
float: left;
background-color: grey;
}
& the HTML is:
<div class="container">
<div class="picture">Picture</div>
<div class="column">
<table>
<tr>
<td>Genere</td>
<td>Arcade</td>
</tr>
<tr>
<td>Developer</td>
<td>Micheal A. Denio</td>
</tr>
<tr>
<td>Publisher</td>
<td>Micheal A. Denio</td>
</tr>
<tr>
<td>Released</td>
<td>1988</td>
</tr>
<tr>
<td>Platform</td>
<td>DOS</td>
</tr>
<tr>
<td>Rating 1</td>
<td>Rating Picture will goes here</td>
</tr>
<tr>
<td>Rating 2</td>
<td>Rating2 Pic will goes here</td>
</tr>
</table>
</div>
</div>
If you do not want to use table you can achieve this with ul & li combination.
Cheers!

as i m getting your question.You need to give float on your div
jsfiddle.net/tKnw9/12
check the fiddle

Resources