Designing clean layouts with HTML and CSS by incorporating negative space

Question

Designing clean layouts with HTML and CSS by incorporating negative space

Is it possible for the body text to seamlessly fill the available white space next to the heading text, as depicted in the image?

Your feedback on this would be greatly appreciated.

.column {
  display: inline-block;
  column-count: 3;
  text-align: justify;
  column-gap: 20px;
  column-rule-color: green;
  column-rule-style: solid;
  column-rule-width: 10px;
}

h2 {
  column-span: all;
}

<div class="column">
  <h2>
    Inspired by the Traditions of Africa<br> BUt Ruled by a Contemporary Spirit
  </h2>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
</div>

html css

Answer 1

Answer №1

After reviewing your responses, I have created a responsive solution for you. To add spaces between paragraphs, simply enclose each paragraph in p tags. (You can test the responsiveness by running and checking the snippet in fullpage).

<style type="text/css">
  .column {
    -moz-column-width: 30vw;
    column-width: 30vw;
    column-gap: 20px;
    column-rule-color: green;
    column-rule-style: solid;
    column-rule-width: 10px;
  }

  @media only screen and (max-width: 768px) {
    .column {
      -moz-column-width: 47vw;
      column-width: 47vw;
    }
  }

  @media only screen and (max-width: 480px) {
    .column {
      -moz-column-width: 100vw;
      column-width: 100vw;
    }
  }
</style>

<div class="column">

  <h2>Inspired by the Traditions of Africa
    But Guided by a Modern Spirit</h2>

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
</div>

Answer 2

After reviewing your responses, I have created a responsive solution for you. To add spaces between paragraphs, simply enclose each paragraph in p tags. (You can test the responsiveness by running and checking the snippet in fullpage).

<style type="text/css">
  .column {
    -moz-column-width: 30vw;
    column-width: 30vw;
    column-gap: 20px;
    column-rule-color: green;
    column-rule-style: solid;
    column-rule-width: 10px;
  }

  @media only screen and (max-width: 768px) {
    .column {
      -moz-column-width: 47vw;
      column-width: 47vw;
    }
  }

  @media only screen and (max-width: 480px) {
    .column {
      -moz-column-width: 100vw;
      column-width: 100vw;
    }
  }
</style>

<div class="column">

  <h2>Inspired by the Traditions of Africa
    But Guided by a Modern Spirit</h2>

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
</div>

Answer 3

Answer №2

Insert the following line of code into the h2 section: text-align: left;.

For an alternative effect, consider including margin-right: 50%; in the h2 as well.

<style type="text/css">
  .column {
    display: inline-block;
    column-count: 3;
    text-align: justify;
    column-gap: 20px;
    column-rule-color: green;
    column-rule-style: solid;
    column-rule-width: 10px;
  }
  
  h2 {
    column-span: all;
    /* add this line */
    text-align: left;
    margin-right: 50%;
  }
</style>

<body>
  <h2>
    Inspired by the Traditions of Africa <br> BUt Ruled by a Contemporary Spirit
  </h2>
  <div class="column">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
  </div>
</body>

Answer 4

Insert the following line of code into the h2 section: text-align: left;.

For an alternative effect, consider including margin-right: 50%; in the h2 as well.

<style type="text/css">
  .column {
    display: inline-block;
    column-count: 3;
    text-align: justify;
    column-gap: 20px;
    column-rule-color: green;
    column-rule-style: solid;
    column-rule-width: 10px;
  }
  
  h2 {
    column-span: all;
    /* add this line */
    text-align: left;
    margin-right: 50%;
  }
</style>

<body>
  <h2>
    Inspired by the Traditions of Africa <br> BUt Ruled by a Contemporary Spirit
  </h2>
  <div class="column">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
  </div>
</body>

Answer 5

Answer №3

The ultimate solution

 .column {
    display: grid;
    text-align: justify;
    gap: 20px;
    grid-template-areas: "header sidebar"
      "main sidebar";
  }

  h2 {
    grid-area: header;
  }

  p:first-of-type {
    grid-area: main;
  }

  p:nth-of-type(2n) {
    grid-area: sidebar;
  }

<body>
  <div class="column">
    <h2>Inspired by the Traditions of Africa But Ruled by a Contemporary Spirit</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
    </p>
  </div>
</body>

To resolve this issue effectively, one should eliminate column-span: all; from the <h2>, as only all and none are valid values for column-span. Alternatively, utilizing CSS grid can achieve a similar outcome.

 .column {
    display: inline-block;
    text-align: justify;
    column-gap: 20px;
    column-count: 3;
    column-rule-color: green;
    column-rule-style: solid;
    column-rule-width: 10px;
  }
* {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: content-box;
}

<body>

  <div class="column">
    <h2>Inspired by the Traditions of Africa
      BUt Ruled by a Contemporary Spirit</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
  </div>
</body>

Answer 6

The ultimate solution

 .column {
    display: grid;
    text-align: justify;
    gap: 20px;
    grid-template-areas: "header sidebar"
      "main sidebar";
  }

  h2 {
    grid-area: header;
  }

  p:first-of-type {
    grid-area: main;
  }

  p:nth-of-type(2n) {
    grid-area: sidebar;
  }

<body>
  <div class="column">
    <h2>Inspired by the Traditions of Africa But Ruled by a Contemporary Spirit</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
    </p>
  </div>
</body>

To resolve this issue effectively, one should eliminate column-span: all; from the <h2>, as only all and none are valid values for column-span. Alternatively, utilizing CSS grid can achieve a similar outcome.

 .column {
    display: inline-block;
    text-align: justify;
    column-gap: 20px;
    column-count: 3;
    column-rule-color: green;
    column-rule-style: solid;
    column-rule-width: 10px;
  }
* {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: content-box;
}

<body>

  <div class="column">
    <h2>Inspired by the Traditions of Africa
      BUt Ruled by a Contemporary Spirit</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when
  </div>
</body>

Designing clean layouts with HTML and CSS by incorporating negative space

Answer №1

Answer №2

Answer №3

Similar questions

Issues with CKEditor's failure to save content in utf-8 character encoding

Flow of Logic using HTML5 WebWorkers

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

Is it feasible to utilize Sublime Editor for building SCSS/SASS files? Learn how to compile SCSS/SASS with Sublime Editor

Conflict between Angular's ng-repeat directive and Sass styling

Eliminate any undefined data in the popup map of Javascript

Adjust the width of an element as its content dynamically shifts

Modify a section of text in iOS by swapping it with a new

When I access the browser, it displays "???"" symbols instead of UTF-8 characters

Main wrapper with CSS sticky footer and top margin

Combining sticky user input and button side by side using CSS

Identify whether a specific Instagram post is a video by utilizing Python with selenium

What is the best way to eliminate padding for a specific element within a div container?

Does the opacity refer to the second argument in mat-color?

Trouble with setting the width of a fixed element within a parent div

Guide on how to launch an Android app if it is already installed, or direct the user to the Play Store from a web

The Ul Li tag cannot be aligned to the right

"Is it possible to apply CSS to all HTML elements except for a

Django authentication ensures secure access for users on

Exploring and Modifying CSS Styles in Element Properties