Using CSS grid can allow for paragraphs to overlap on top of each

https://i.sstatic.net/LVsgQ.jpgCurrently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layout. I have attached an image to illustrate the desired outcome and highlight the problem for better understanding. If anyone has a solution or suggestion, please feel free to share.

In showcasing my preference for filling the white space with text, I intentionally placed two elements at the same position using span tags as a visual aid.

I welcome alternative examples and methods that demonstrate effective ways to achieve full text coverage within the given white space.

.bio-content {
  display: grid;
  margin-top: 10rem;
  grid-template-columns: 3fr;
  grid-template-rows: 3fr;
}

.bio-content .info-img {
  margin-left: 1.5rem;
  grid-column: 1/2;
  grid-row: 1/2;
}

.bio-content .biography,
.bio-content biography2 {
  margin-left: 2rem;
  margin-bottom: 0rem;
  line-height: 30px;
  color: white;
  border-left: none;
  padding: 0 1rem;
}

.bio-content .biography {
  grid-column: 2/4;
  grid-row: 1/4;
}

.bio-content .biography2 {
  grid-column: 1/4;
  grid-row: 3/4;
}

.bio-content table {
  grid-row: 2/3;
  grid-column: 1/2;
}

/* G-CYR : I added bg to see white text */
body {background:gray;}
<main id="bio">
  <div class="container">
    <div class="bio-content">
      <div class="info-img">
        <img src="/Core/img/bio.jpg" alt="">
        <table>
          <tr>
            <td>NAME:</td>
            <td>LAZAR ANGELOV</td>
          </tr>
          <tr>
            <td>HEIGHT:</td>
            <td>6"0(180 CM)</td>
          </tr>
          <tr>
            <td>WEIGHT:</td>
            <td>195 LBS(88 KG)</td>
          </tr>
          <tr>
            <td>DATE OF BIRTH:</td>
            <td>SEPTEMBER 22ND, 1984</td>
          </tr>
          <tr>
            <td>BIRTHPLACE:</td>
            <td>SOFIA,BULGARIA</td>
          </tr>
        </table>
      </div>
      <div class="biography">
        <h1>Biography</h1>
        <p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>

        <p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>

      </div>
      <div class="biography2">
        <p>
          <p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
      </div>
    </div>
  </div>
</main>

UPDATE Attempted to tweak the grid row by adjusting the .biography2 to grid-row:4/4; but it did not produce the desired result. Kindly refer to the latest image provided where there is still some remaining white space below the imagehttps://i.sstatic.net/MiJXE.png

htmlcsspositionoverlappingparagraph

Answer №1

If you desire text formatted in such a way, the ideal approach would be to implement floats.

Answer №2

To fix the issue with displaying both biographies, simply delete the grid-row definition from the CSS code:

.bio-content {
  display: grid;
  margin-top: 10rem;
  grid-template-columns: 3fr;
  grid-template-rows: 3fr;
}

.bio-content .info-img {
  margin-left: 1.5rem;
  grid-column: 1/2;
  grid-row: 1/2;
}

.bio-content .biography,
.bio-content biography2 {
  margin-left: 2rem;
  margin-bottom: 0rem;
  line-height: 30px;
  color: white;
  border-left: none;
  padding: 0 1rem;
}

.bio-content .biography {
  grid-column: 2/4;
}

.bio-content .biography2 {
  grid-column: 1/4;
}

.bio-content table {
  grid-row: 2/3;
  grid-column: 1/2;
}

/* G-CYR : I added bg to see white text */
body {background:gray;}
<main id="bio">
  <div class="container">
    <div class="bio-content">
      <div class="info-img">
        <img src="/Core/img/bio.jpg" alt="">
        <table>
          <tr>
            <td>NAME:</td>
            <td>LAZAR ANGELOV</td>
          </tr>
          <tr>
            <td>HEIGHT:</td>
            <td>6"0(180 CM)</td>
          </tr>
          <tr>
            <td>WEIGHT:</td>
            <td>195 LBS(88 KG)</td>
          </tr>
          <tr>
            <td>DATE OF BIRTH:</td>
            <td>SEPTEMBER 22ND, 1984</td>
          </tr>
          <tr>
            <td>BIRTHPLACE:</td>
            <td>SOFIA,BULGARIA</td>
          </tr>
        </table>
      </div>
      <div class="biography">
        <h1>Biography</h1>
        <p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>

        <p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>

      </div>
      <div class="biography2">
        <p>
          <p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
      </div>
    </div>
  </div>
</main>

Answer №3

G-Cyr raised a valid point that both sections in your code are set to span until row 4. To resolve the issue, it is recommended to adjust the CSS of biography2 to grid-row:4/4 instead of 3/4. By doing this, your biography 2 paragraph will be displayed on the final row while the rest remains in the first 3 rows.

.bio-content {
  display: grid;
  margin-top: 10rem;
  grid-template-columns: 3fr;
  grid-template-rows: 3fr;
}

.bio-content .info-img {
  margin-left: 1.5rem;
  grid-column: 1/2;
  grid-row: 1/2;
}

.bio-content .biography,
.bio-content .biography2 {
  margin-left: 2rem;
  margin-bottom: 0rem;
  line-height: 30px;
  color: white;
  border-left: none;
  padding: 0 1rem;
}

.bio-content .biography {
  grid-column: 2/4;
  grid-row: 1/4;
}

.bio-content .biography2 {
  grid-column: 1/4;
  grid-row: 4/4;
}

.bio-content table {
  grid-row: 2/3;
  grid-column: 1/2;
}

/* G-CYR : I added bg to see white text */
body {background:gray;}
<main id="bio">
  <div class="container">
    <div class="bio-content">
      <div class="info-img">
        <img src="/Core/img/bio.jpg" alt="">
        <table>
          <tr>
            <td>NAME:</td>
            <td>LAZAR ANGELOV</td>
          </tr>
          <tr>
            <td>HEIGHT:</td>
            <td>6"0(180 CM)</td>
          </tr>
          <tr>
            <td>WEIGHT:</td>
            <td>195 LBS(88 KG)</td>
          </tr>
          <tr>
            <td>DATE OF BIRTH:</td>
            <td>SEPTEMBER 22ND, 1984</td>
          </tr>
          <tr>
            <td>BIRTHPLACE:</td>
            <td>SOFIA,BULGARIA</td>
          </tr>
        </table>
      </div>
      <div class="biography">
        <h1>Biography</h1>
        <p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>

        <p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique est enim, a hendrerit odio sagittis sit amet. Cras augue tortor, dignissim in imperdiet sit amet, lobortis eget orci. Fusce arcu dui, sollicitudin sit amet elementum vel, suscipit ut justo. Nulla quis pretium sem. Aenean ut nibh leo. Vivamus cursus nibh et augue elementum facilisis. Aenean tortor mauris, maximus vestibulum cursus quis, maximus at est. Nunc ultricies luctus mi elementum.
        </p>

      </div>
      <div class="biography2">
        <p>
          <p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
                  <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique est enim, a hendrerit odio sagittis sit amet. Cras augue tortor, dignissim in imperdiet sit amet, lobortis eget orci. Fusce arcu dui, sollicitudin sit amet elementum vel, suscipit ut justo. Nulla quis pretium sem. Aenean ut nibh leo. Vivamus cursus nibh et augue elementum facilisis. Aenean tortor mauris, maximus vestibulum cursus quis, maximus at est. Nunc ultricies luctus mi elementum.
        </p>
      </div>
    </div>
  </div>
</main>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain data using a REST request from a webpage or web server

Is it possible to extract the last status value from a delivery courier's webpage by sending a tracking number request using PHP? I have found some helpful information, but I am unsure if it is possible to extract only specific values from the result ...

phphtmlrestapi

Transforming data from PHP JSON format into HTML output

Struggling to convert JSON data into HTML format? Having trouble maintaining the correct order of child elements in your structure? Here's a solution: Take a look at this example JSON: { "tag": "html", "children": [ { "ta ...

phphtmljsondom

Disabling 'Input Number' feature is ineffective in Firefox browser

Is there a way to prevent the input value from changing when the up or down arrow is held, even if the input is disabled? I want to retain the arrows without allowing this behavior on Firefox. Give it a try: Press the up arrow. After 5 seconds, the input ...

javascriptjqueryhtmlinput

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

I am working on a dynamic table with 5 rows, each row containing 3 columns - partNO, quantity, and a delete button. Each row is assigned a unique ID for identification purposes. If a user deletes the second row, I want the IDs of the remaining rows to be ...

jqueryhtml

What steps can be taken to ensure a function operates even when the mouse is stationary?

$(document).ready(function() { var score = 0; $("body").mousemove(function() { score++; $("#result").val(score); console.log(score); }); }); As I move my mouse, the score keeps increasing. But, I'm wonde ...

javascriptjqueryhtmlweb

Bootstrap-4 modal not appearing when activated within a dropdown menu

When I tried to use a dropdown feature in my application, I encountered an issue where one of the dropdown items was supposed to open a modal but it wasn't showing up. However, the modal worked perfectly fine when I accessed it using a normal button i ...

htmlcssdrop-down-menubootstrap-4modal-dialog

Persistent banner designed to accompany blog posts

I've been attempting to insert a banner ad that runs along the left side of my blog post. Unfortunately, all my efforts so far have caused it to display above the content, pushing the blog post down the page. You can view the live link here. Here i ...

htmlcsswordpress

Text that changes within a set-sized box

I'm working with a fixed-size div that contains dynamically generated text. Is there an easy method using DOJO or plain Javascript to truncate the text before the end of the div and add "..."? How can I accomplish this regardless of the font size bein ...

javascripthtmldojo

Applying Media Queries Based on Element Height

Situation: In my scenario, there is an image with two buttons below it, all of which share the same width. Issue: When the viewport is too wide horizontally, the buttons are not visible without scrolling down. This poses a challenge for tablets and small ...

javascriptjqueryhtmlcssmedia-queries

Two-column dropdowns without the use of tables

I am looking to create a drop-down menu with the following structure: | Heading ---------------- action | Item action | Item action | Item action | Item The action could represent "Change" and Item could be something like "Users". To maintain ...

htmlcss

Accessibility issues detected in Bootstrap toggle buttons

I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...

javascriptjqueryhtmltwitter-bootstraptoggle

Ways to eliminate line breaks and <br> tags in text using only CSS to create a button that trunc

I am currently working on incorporating a truncated text button using only CSS. The issue I'm facing is that the "show more" button doesn't ignore the line breaks or any other relevant HTML within the teaser and text body. This is causing too muc ...

htmlcsscheckboxlabeltruncate

Unable to bypass YouTube advertisement

I am currently experimenting with using nodejs puppeteer to test if I can bypass the ad on Youtube. Although this is just for testing purposes, I am facing some challenges with getting it to work as expected. I have implemented a while loop to search for ...

javascripthtmlnode.jspuppeteer

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Is there a way to align these two div side by side? <div class="main_one"> <div class="number_one">Title A</div> </div> <div class="main_two"> <div class="number_two">Title B</div> </div> <div class=" ...

cssangularjsreactjstwitter-bootstrapsass

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

javascriptjqueryhtml

Apps created with PhoneGap will maintain the original sizing of web pages and not automatically resize for display on Android devices

After successfully porting my web-based tool to Android using PhoneGap from my Github repository, I encountered an issue with the display on Android devices. The app loads up too big for the screen, forcing me to constantly scroll around to see and access ...

javascriptandroidresizephonegap-buildhtml

A web page with a full-width header, content constrained to a set width, logo elements displayed with flexbox, and a footer that

I've been facing challenges in making this website responsive on both desktop and mobile devices. Initially, the header background image wasn't displaying as intended, followed by issues with the flexbox logo elements in the header and the sticky ...

htmlcssresponsive-designsticky-footer

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an <h2 class="landing-panel-title> containing a <span class="landing-panel-icon-right ion-ios-search-strong>. The second class on the span is from an icon font called ionicons. Despite this, it may not ...

htmlcss

problem arises when I attempt to use the code individually, as well as when I incorporate it into my existing

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>App Title</title> <!-- Framework's CSS Fil ...

jqueryhtml