Creating CSS boxes in a dual column layout with a step-by-step approach

Question

Creating CSS boxes in a dual column layout with a step-by-step approach

Currently, I am in the process of developing a user interface for a menu that looks something like this:

https://i.sstatic.net/GuzRm.png

I am exploring different implementation methods for this design. In this project, I am utilizing Bootstrap framework. The main container is a container-fluid from Bootstrap nested inside another DIV that occupies 50% width of the screen. This is why I opted for container-fluid, considering its fluid nature.

I can leverage Bootstrap (version 3) Grid's functionality (col-xx-x), or any other CSS techniques to accomplish this layout.

So far, here is what I have achieved using float: left:

* {
  box-sizing: border-box;
}

.container-fluid {
  margin-top: 75px;
}

.menu-items {
  padding: 0;
  position: relative;
  list-style-type: none;
  text-align: center;
}

.menu-item {
  display: inline-block;
  float: left;
  width: 50%;
  height: 250px;
}

.menu-item:nth-child(odd) {
  margin-top: -65px;
}
.menu-item:nth-child(even) {
  margin-top: 95px;
}

.image-wrapper{
  display: inline-block;
}

.image {
  background-color: gray;
  width: 80px;
  height: 100px;
}

<div class="container-fluid">
  <ul class="menu-items">
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 1</span>
      </div>
    </li>
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 2</span>
      </div>
    </li>
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 3</span>
      </div>
    </li>
    <li class="menu-item">
      <div class="image-wrapper">
        <div class="image"></div>
      </div>
      <div class="text-wrapper">
        <span>Item 4</span>
      </div>
    </li>
  </ul>
</div>

angularjs css twitter-bootstrap-3 sass

Answer 1

Answer №1

To achieve the desired layout using only CSS, you can utilize the properties float and clear, along with adding appropriate margin values to your elements. Here is a demonstration:

.container:after {
  content: "";
  display: table;
  clear: both;
}

.a,
.c {
  float: left;
}

.c {
  margin-top: 10px;
}

.b,
.d {
  float: right;
  margin-top: -30px;
}

.clear {
  clear: both;
}

/* additional styles for demonstration */
.container {
  background-color: #e0e0e0;
  padding: 30px;
}

/* additional styles for demonstration */
.item {
  background-color: orange;
  font-size: 2em;
  color: white;
  padding: 10px;
}

<div class="container">
  <div class="item a">One</div>
  <br class="clear" />
  <div class="item b">Two</div>
  <br class="clear" />
  <div class="item c">Three</div>
  <br class="clear" />
  <div class="item d">Four</div>
  <br class="clear" />
</div>

Answer 2

To achieve the desired layout using only CSS, you can utilize the properties float and clear, along with adding appropriate margin values to your elements. Here is a demonstration:

.container:after {
  content: "";
  display: table;
  clear: both;
}

.a,
.c {
  float: left;
}

.c {
  margin-top: 10px;
}

.b,
.d {
  float: right;
  margin-top: -30px;
}

.clear {
  clear: both;
}

/* additional styles for demonstration */
.container {
  background-color: #e0e0e0;
  padding: 30px;
}

/* additional styles for demonstration */
.item {
  background-color: orange;
  font-size: 2em;
  color: white;
  padding: 10px;
}

<div class="container">
  <div class="item a">One</div>
  <br class="clear" />
  <div class="item b">Two</div>
  <br class="clear" />
  <div class="item c">Three</div>
  <br class="clear" />
  <div class="item d">Four</div>
  <br class="clear" />
</div>

Answer 3

Answer №2

If you're adamant about using a solely CSS solution, consider employing floats and relative width units or percentages.

Below is a straightforward structure that doesn't rely heavily on code or frameworks like Bootstrap.

Enclose the entire configuration within a div with the class "wrapper"
Subsequently...group every two elements with the class "square" in a horizontal row specified by the class "row"
Then...utilize nth-of-type selectors to adjust offsets accordingly, based on whether the element is the first or second one inside the "row" div.

Each "row" div will consistently occupy an entire line

All elements within the "row" are limited to 50% maximum width...resize your screen to see the effect.

See the Functional Demo:

* {
  box-sizing: border-box;
}

body {
  background: grey
}

.wrapper {
  width: 100%;
  margin: 12% auto;
}

img {
  display: block;
  max-width: 100%;
}

.square {
  background: black;
  width: 49%;
  text-align: center;
  display: inline-block;
  color:white;
}

.row {
  display: block;
  width: 80%;
  margin:0 auto;

}

.row .square:nth-of-type(1) {
  float: left;
}

.row:not(:nth-of-type(1)) .square:nth-of-type(1) {
  margin-top: 12%;
}

.row .square:nth-of-type(2) {
  margin-top: 12%;
  float: right;
}

<div class="wrapper">
  <div class="row">
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=one">Line for element 1</div>
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=two">Line for element 2</div>
  </div>
  <div class="row">
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=three">Line for element 3</div>
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=four">Line for element 4</div>
  </div>
</div>

This presents my method of utilizing pure CSS for this task.

However, here's how I would prefer to approach it.

I'd opt to integrate Masonry into the project. Despite its possible limitations for this specific use case, it significantly enhances design versatility.

[...] a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

I understand your preference to avoid external libraries, but...

You can implement Masonry without jQuery:

Masonry v3 supports vanilla JS, without requiring jQuery.

Additionally, the minified library size is under 8kb, accessible at:

https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="640905170b0a161d4908051d0b111024504a564a54">[email protected]</a>/dist/masonry.pkgd.min.js

Considering this, utilizing Masonry might be beneficial.

Furthermore, you can initiate Masonry through HTML alone. For example:

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Following these steps should yield the following outcome...

Note: (images may load slowly)

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  background: #131418;
}

.grid {
  max-width: 100%;
  margin: 0 auto;
  width: 95vw;
}

.grid-item {
  width: 50%;
  background: white;
  border: 2px #131418 solid;
}

.grid-item img {
  width: 100%;
  height: auto;
}

.grid-item p {
  font-size: 16px;
  padding: 2px 15px;
  text-align: justify
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid" data-masonry='{ "itemSelector": ".grid-item"}'>
  <div class="grid-item"><img src="//unsplash.it/501/501" />
    <p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
      nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
      facilisi definiebas ea, ad omnium utamur ius.</p>
  </div>

  <div class="grid-item"><img src="//unsplash.it/511/511" />
    <p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
      omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
      Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
      conceptam te.</p>
  </div>

  // Additional grid items go here

</div>

For another illustration featuring generic placeholders, where each item spans 50% width and boasts dynamic height, refer below. This variant also features the vertical offset similar to your example image.

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  background: #131418;
}

.grid {
  max-width: 100%;
  margin: 0 auto;
  width: 95vw;
}

.grid-item {
  width: 50%;
  background: white;
  border: 2px #131418 solid;
}

.grid-item img {
  width: 100%;
  height: auto;
}

.grid-item p {
  font-size: 16px;
  padding: 2px 15px;
  text-align: justify
}

.grid-item:nth-of-type(2) {
  margin-top: 10em
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid" data-masonry='{ "itemSelector": ".grid-item"}'>
  <div class="grid-item"><img src="//via.placeholder.com/400x400" />
    <p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
      nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
      facilisi definiebas ea, ad omnium utamur ius.</p>
  </div>

  <div class="grid-item"><img src="//via.placeholder.com/500x500" />
    <p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
      omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
      Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
      conceptam te.</p>
  </div>

  // More grid items go here

</div>

Just a heads-up: Angular offers a similar tool, although I lack personal experience with it.

Answer 4

If you're adamant about using a solely CSS solution, consider employing floats and relative width units or percentages.

Below is a straightforward structure that doesn't rely heavily on code or frameworks like Bootstrap.

Enclose the entire configuration within a div with the class "wrapper"
Subsequently...group every two elements with the class "square" in a horizontal row specified by the class "row"
Then...utilize nth-of-type selectors to adjust offsets accordingly, based on whether the element is the first or second one inside the "row" div.

Each "row" div will consistently occupy an entire line

All elements within the "row" are limited to 50% maximum width...resize your screen to see the effect.

See the Functional Demo:

* {
  box-sizing: border-box;
}

body {
  background: grey
}

.wrapper {
  width: 100%;
  margin: 12% auto;
}

img {
  display: block;
  max-width: 100%;
}

.square {
  background: black;
  width: 49%;
  text-align: center;
  display: inline-block;
  color:white;
}

.row {
  display: block;
  width: 80%;
  margin:0 auto;

}

.row .square:nth-of-type(1) {
  float: left;
}

.row:not(:nth-of-type(1)) .square:nth-of-type(1) {
  margin-top: 12%;
}

.row .square:nth-of-type(2) {
  margin-top: 12%;
  float: right;
}

<div class="wrapper">
  <div class="row">
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=one">Line for element 1</div>
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=two">Line for element 2</div>
  </div>
  <div class="row">
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=three">Line for element 3</div>
    <div class="square"><img src="http://via.placeholder.com/1000x1000?text=four">Line for element 4</div>
  </div>
</div>

This presents my method of utilizing pure CSS for this task.

However, here's how I would prefer to approach it.

I'd opt to integrate Masonry into the project. Despite its possible limitations for this specific use case, it significantly enhances design versatility.

[...] a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

I understand your preference to avoid external libraries, but...

You can implement Masonry without jQuery:

Masonry v3 supports vanilla JS, without requiring jQuery.

Additionally, the minified library size is under 8kb, accessible at:

https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="640905170b0a161d4908051d0b111024504a564a54">[email protected]</a>/dist/masonry.pkgd.min.js

Considering this, utilizing Masonry might be beneficial.

Furthermore, you can initiate Masonry through HTML alone. For example:

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Following these steps should yield the following outcome...

Note: (images may load slowly)

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  background: #131418;
}

.grid {
  max-width: 100%;
  margin: 0 auto;
  width: 95vw;
}

.grid-item {
  width: 50%;
  background: white;
  border: 2px #131418 solid;
}

.grid-item img {
  width: 100%;
  height: auto;
}

.grid-item p {
  font-size: 16px;
  padding: 2px 15px;
  text-align: justify
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid" data-masonry='{ "itemSelector": ".grid-item"}'>
  <div class="grid-item"><img src="//unsplash.it/501/501" />
    <p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
      nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
      facilisi definiebas ea, ad omnium utamur ius.</p>
  </div>

  <div class="grid-item"><img src="//unsplash.it/511/511" />
    <p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
      omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
      Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
      conceptam te.</p>
  </div>

  // Additional grid items go here

</div>

For another illustration featuring generic placeholders, where each item spans 50% width and boasts dynamic height, refer below. This variant also features the vertical offset similar to your example image.

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  background: #131418;
}

.grid {
  max-width: 100%;
  margin: 0 auto;
  width: 95vw;
}

.grid-item {
  width: 50%;
  background: white;
  border: 2px #131418 solid;
}

.grid-item img {
  width: 100%;
  height: auto;
}

.grid-item p {
  font-size: 16px;
  padding: 2px 15px;
  text-align: justify
}

.grid-item:nth-of-type(2) {
  margin-top: 10em
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid" data-masonry='{ "itemSelector": ".grid-item"}'>
  <div class="grid-item"><img src="//via.placeholder.com/400x400" />
    <p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
      nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
      facilisi definiebas ea, ad omnium utamur ius.</p>
  </div>

  <div class="grid-item"><img src="//via.placeholder.com/500x500" />
    <p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
      omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
      Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
      conceptam te.</p>
  </div>

  // More grid items go here

</div>

Just a heads-up: Angular offers a similar tool, although I lack personal experience with it.

Creating CSS boxes in a dual column layout with a step-by-step approach

Answer №1

Answer №2

However, here's how I would prefer to approach it.

Similar questions

Is there a way for me to achieve a vertical page turning effect on a single page?

The offset values of $(element) keep increasing indefinitely when they are updated repeatedly

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

Set the default state of an input field to lowercase when using Angular

Having trouble with your angular.jg ng controller functioning properly?

The angular js routing and translate template is malfunctioning and not functioning as expected

Accessing deeply nested JSON objects in AngularJS

Customizing hyperlink styles with JavaScript on click

Align the button to the right within the form

What is the best way to transmit a JSON object to REST services using Angular?

Combining selected boxes through merging

Sharing asynchronous data between AngularJS controllers

The Bootstrap 5 class "col-md-4" seems to be malfunctioning

How to retrieve the index of a nested ng-repeat within another ng-repeat loop

Having trouble creating an angularjs table using ng-repeat in the controller?

Merge the "Checkbox" and "Avatar" components within an Ionic Framework List

Modify the paragraph content upon clicking

Adjusting the content of a span causes the parent element to shift to the left

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

Angular UI modal using the powerful features of Bootstrap 4