How to Create Multiple Columns in a Div

How to create multiple columns in a div

Create three divs with float: left; (or right) and give them an exact width.

<div class="bottom">
  <div style="float: left; width: 33%;"></div>
  <div style="float: left; width: 33%;"></div>
  <div style="float: left; width: 33%;"></div>
</div>

See it in action.

CSS - Make multiple divs in columns wrap back around

It is possible using media queries

Check out this article to find out more: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Syntax

Media queries consist of an optional media type and can, as of the
CSS3 specification, contain zero or more expressions, expressed as
media features, which resolve to either true or false. The result of
the query is true if the media type specified in the media query
matches the type of device the document is being displayed on and all
expressions in the media query are true.

See snippet below. Resize it to see it working!

.red, .green, .blue {  display: inline-block;  float: left;  margin: 1%;  width: 48%;}
.red {  background: red;  height: 50px;}
.green {  background: green;  height: 100px;}
.blue {  background: blue;  height: 50px;}
@media (max-width: 400px) {  .red, .green, .blue {    display: block;    width: 100%;  }}

<div class="red">Red</div><div class="green">Green</div><div class="blue">Blue</div>

CSS Multiple multi-column divs

They sure can! The basic effect (it sounds like) you're looking for is like so:

#wrapper {    width: 900px;}    .item {    height: 200px;    width: 200px;    margin: 10px;    float: left;}

<div id="wrapper">    <div class="item">Something</div>    <div class="item">Something else</div>    <div class="item">Something cool</div>    <div class="item">Something sweet</div>    <div class="item">Something just ok</div></div>

Two columns divs inside a div container

I would like to set the 2-columns divs with the same height than
container

Since your container have height:100%, I assume you want the same for your child div's

Give 100% height to your html and body
```
html,body{
 height:100%
} 
```
You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.
```
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}

#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}
```

Here's the fiddle

Cheers!

How to make 2 tables in different div columns and with different row height has the same table size

Remove the background-color from the table

Wrap the tables in a couple of <div> and make use of the css flexbox properties stretch and grow.

stretch ensures both containers are equal height

grow makes the table container (where the background color is applied) takes up all remaining space between the header and the button.

You might want to play around with some margin on the buttons to get white between the grey and buttons.

style

<style>
    .flex-row{
        display: flex;
        align-items: stretch;
        }
    .flex-col{
        display: flex;
        flex-direction: column;
        }
    .flex-table{
        background: #f5f5f5;
        flex-grow: 1;
        }
</style>

html

<div class="container">

  <div class="row flex-row">       // added class flex-row
    <div class="col-6 flex-col">   // added class flex-col
      <h2>Table title 1</h2>
      <div class="flex-table">     // added div with background color
        <table class="table">
        ...
        </table>
      </div>
      <button class="btn btn-block btn-primary">Show full list</button>
    </div>

  <div class="row flex-row">       // added class flex-row
    <div class="col-6 flex-col">   // added class flex-col
      <h2>Table title 2</h2>
      <div class="flex-table">     // added div
        <table class="table">
        ...
        </table>
      </div>
      <button class="btn btn-block btn-primary">Show full list</button>
    </div>

</div>

And a fiddle

A usefull link on understanding flex boxes

How can I add multiple columns below one column?

You can use colspan in your CSS code. Like this:

colspan = "10"

The code below should show the result you want:

 <table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Parameter</th>
      <th scope="col">Unit</th>
          <th scope="col" width="30px" colspan="5">Water Body Classification</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td></td>
    <td></td>
      <th class="text-center" scope="col">AA</th>
      <th class="text-center" scope="col">A</th>
      <th class="text-center" scope="col">B</th>
      <th class="text-center" scope="col">C</th>
      <th class="text-center" scope="col">D</th>
    </tr>
     <tr>
      <td>pH (Range)</td>
      <td>mg/L</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-9.0</td>
      <td class="text-center">6.5-9.0</td>
    </tr>
  </tbody>
</table>

How to Create Multiple Columns in a Div