How to create a two columns layout with gap

by

Css columns sounds like what you’re looking for. You can use the column-rule property for the vertical line.

columns: 2 400px;
column-rule: 1px solid black;

https://css-tricks.com/almanac/properties/c/column-rule/

Please note that the order of your elements will be like a text flow, so:

1 | 4
2 | 5
3 | 6

If that doesn’t work out for you, you could add a right border to your first column and add margin + padding on the right side to space it out evenly. (combined with either display: block; with a float, or a display: inline-block; for displaying the columns next to each other).

More Related Contents:

  1. create a custom button [closed]
  2. How to apply a CSS filter to a background image
  3. Why is a flex item limited to parent size?
  4. Transparent text cut out of background
  5. Remove blue border from css custom-styled button in Chrome
  6. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  7. React.js inline style best practices [closed]
  8. Internet Explorer’s CSS rules limits
  9. CSS: Set a background color which is 50% of the width of the window
  10. CSS background opacity with rgba not working in IE 8
  11. Can I position an element fixed relative to parent? [duplicate]
  12. Does element width include padding?
  13. IE8 :nth-child and :before
  14. Cols, colgroups and css “:hover” pseudoclass
  15. How does rem differ from em in CSS?
  16. How does object-fit work with canvas element?
  17. Why does the linear-gradient disappear when I make an element position:absolute?
  18. width:auto for fields
  19. Preventing “double” borders in CSS
  20. Bootstrap Center Navbar Items
  21. Disable zoom on a div, but allow zoom on the page (an alternate div)
  22. CSS Selector for
  23. How to apply css to iframe content? [closed]
  24. Make scrollbars only visible when a Div is hovered over?
  25. How to add different CSS style to every nth element, depending on n using LESS
  26. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  27. Maintain div aspect ratio according to height
  28. How to prevent a CSS keyframe animation from running on page load?
  29. Does Internet Explorer support CSS transitions?
  30. How do I style a specific word with CSS in an HTML element?

Leave a Comment