Divs side by side with same height and vertical line between them

I would like to achieve side by side, same height divs (without using table layout) and a single vertical line between them. I tried with flex container per row, but is unplesent to have the vertical line in many pieces...What can be the best solution for this problem? I would like to have something like in the image bellow:

A sumary of what I tried:

<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style type="text/css">
.flex-container{
	display: -webkit-flex; /* Safari */		
	display: flex; /* Standard syntax */
}
.flex-container .column{
    background: #dbdfe5;
    width: 100px;
}
.vr {
	background: red;
    width: 2px;
    margin: 0px 5px 0px 5px;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="column">R1 - Col1</div>
        <div class="vr"></div>
        <div class="column bg-alt">R1 - Col2</div>
    </div>
    <div class="flex-container">
        <div class="column">R2 - Col1</div>
        <div class="vr"></div>
        <div class="column bg-alt">R1 - Col2</div>
    </div>
</body>
</html>  
Solution with flexible height

using a wrapper to achieve the divider without interruption.

.col-item {
  width: 49%;
  margin-right: 2%;
  margin-bottom: 15px;
  border: 1px solid blue;
  padding: 5px;
  box-sizing: border-box;
}

.col-item:nth-child(2n) {
  margin-right: 0;
  padding-right: 0;
}

.col-item:nth-last-child(2),
.col-item:last-child {
  margin-bottom: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  height: 100%;
  border-right: 1px solid red;
}
<div class="wrapper">
  <div class="col-item">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div class="col-item">
    At vero eos et accusam et justo duo dolores et ea rebum.
  </div>
  <div class="col-item">
    Lorem ipsum dolor sit amet!
  </div>
  <div class="col-item">
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

How to Create Two DIVs with Same Height Side by Side in CSS, Answer: Use the CSS3 flexbox. With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Every cell in a row will be made the same height and aligned together, which can be either overly rigid or just what you want. I think it makes the front page of this site look neater, and used it elsewhere to easily make a sidebar border into a full-height dividing line between content and sidebar.

Make a container for two column children, float those children to they are next to each other. Make a pseudo element and position it absolutely to make the line that separates the columns.

main{
  height:500px;
  box-sizing:border-box;
}

main > *{
  float:left;
  width:46%;
  margin:2%;
  border:1px solid;
  height:100%;
  box-sizing:border-box;
  position:relative;
}

main > :last-child:before{
  content:"";
  height:100%;
  position:absolute;
  left:-4%;
  margin-left:-3px;
  top:0;
  border:1px solid;
}
<main>
  <div></div>
  <div></div>
</main>

How to place two div side-by-side of the same height using CSS , The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. improvement from reviewers are published first. To style, and try to make you are close to them. </ div > border:1px solid black;. Vertical line between divs. Tag: HTML CSS Two 2-column tables side by side with same height and width. html,css. Okay so I have made a few assumptions to create

Similar to @fauxserious's answer, but you don't need to worry about multiple children in the column's because you add the pseudo selector to the parent container:

main {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

main>* {
  flex: 0 1 auto;
  float: left;
  width: calc(50% - 40px);
  margin: 20px;
  border: 1px solid;
  height: 200px;
  box-sizing: border-box;
}

main:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px; /* Same as margin */
  bottom: 20px; /* Same as margin */
  border-left: 1px solid #ff6600;
}
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

How to float three div side by side using CSS?, Three or more different div can be put side-by-side using CSS. the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; from reviewers are published first. side with the same height and also with the. I have three side by side divs inside a (not ideal I know). These are styled so that the font-size, line-height and width adjust based on viewport width.The text may flow over 2-4 lines which is fine.I need each to be the same height as the tallest of the three side by side 's.

Like that ? :

header, section, .sub_section, footer {
  float:left;
  width: 40%;
  border: 3px solid #000;
  margin-left: 6%;
}
header {
  height: 20vh;
}
section {
  height: 40vh;
  margin-top: 2%;
}
.sub_section {
  height: 20vh;
  margin-top: 2%;
}
footer {
  height: 20vh;
  margin-top: 2%;
}
<header></header>
<header></header>
<section></section>
<section></section>
<div class="sub_section"></div>
<div class="sub_section"></div>
<footer></footer>
<footer></footer>

How To Create Equal Height Columns, When you have columns that should appear side by side, you'll often want them to be of equal height (matching the height of the tallest). The Problem: The Desire​:. The most important point in above example is “ width: 100px; float:left; ” -this is what causes DIVs to go side by side. Some time ago, we had published about another method of placing two div elements side by side – and then positioning them with the help of margin attribute.

I did create an example aswell.

Maybe you like it.

.content-left {
  width: 40%;
  height: 500px;
  border-right: solid 2px red;
  display: inline-block;
}

.content-right {
  width: 40%;
  height 500px;
  display: inline-block;
}
.content {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: lightblue;
}
.left1 {
  height: 190px;
}

.left2 {
  height: 90px;
}

.left3 {
  height: 190px;
}

.right1 {
  height: 190px;
}

.right2 {
  height: 90px;
}

.right3 {
  height: 90px;
}

.right4 {
  height: 90px;
}
<div class="content-left">
  <div class="content left1"></div>
  <div class="content left2"></div>
  <div class="content left3"></div>
</div>
<div class="content-right">
  <div class="content right1"></div>
  <div class="content right2"></div>
  <div class="content right3"></div>
  <div class="content right4"></div>
</div>

Typical use cases of Flexbox, You can read more about the difference between flexbox and CSS Grid A common pattern for navigation is to have a list of items displayed as a horizontal bar. out using grid layout, so the cards themselves will stretch to the same height. If you set both sides to flex: 1 , they will grow and shrink from a  Learn how to create equal height columns with CSS. When you have columns that should appear side by side, you'll often want them to be of equal height (matching the height of the tallest). The columns we made in the previous example are responsive (if you resize the browser window in the try it example, you will see that they automatically

Different Tricks on How to Make Bootstrap Columns All the Same , Here's how to match the height of all elements on the page: $(function() If you take either of these approaches, make sure to disable heights on mobile since the columns are all stacked it won't matter if they're the same height of not. You can <div class="row is-table-row"> <div class="col-sm-4"></div>  Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right;

Left Half and Right Half Layout, Basically two equal height columns are needed inside of a container. for the individual sides have no breaks or whitespace in between them in the HTML. we're making the side flex containers as well, just for fun, to handle the vertical and widths (like a nav bar); whenever I want to vertical-align: [whatevs]; content​. I am having a challenge. I have two divs side by side, and I need them both to stretch to the same height. So if there is extra content in div#2, div #1 stretches down with it and fills with a background color. I have them both set to height: 100%, with a wrapper div set to 100% height around them, but I am definetly doing something wrong.

Fluid Width Equal Height Columns, Equal height columns have been a need of web designers forever. to it which repeats vertically to simulate the look of equal height columns, even if the elements Because we are using percentages for these color stops, this simulated <div class="five-columns group"> <div class="col"><p>Pellentesque habitant morbi  HTML CSS Two 2-column tables side by side with same height and width html,css I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side.

Comments
  • What have you done so far (apart from the sketch)?
  • I updated the question
  • Using the flex-direction: column; should be a way to go ;)
  • Please add the code you're using to the question.
  • is javascript allowed?
  • The extra wrappers are an unnecessary addition
  • How is it different from main in your answer?
  • Sorry when I said wrappers, I meant the .row containers :)
  • Shows how much I was paying attention though to not realise you'd put the pseudo on the parent. +1 :)
  • Thanks for the advice! I was able to remove the .rows.
  • how do you add multiple rows with the same vertical line?
  • Considering your edit, it sounds like flexbox (or potentially the new grid spec) would work better to ensure that the rows and columns match equally (if you are against tables).
  • @V.Sambor I've expanded this (good) answer so that you don't need to worry about multiple rows
  • What about the line?