How can CSS be used to create columns with text of different sizes?

Attempting to construct a text-based webpage entirely with HTML and CSS, the objective is to divide the page into two columns. The first column should occupy 2/3 of the width to accommodate the primary text, while the second column should take up the remaining 1/3 to add supplementary details.

I have been experimenting with the following code:

.position-trbl-0 {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}  

.overflow-hidden {
   overflow: hidden;
}

.row {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.col {
  height: 100%;
  padding: 0 20px;
  overflow: hidden;
}

.col-inner {
  height: 100%;
  width: 100%;
  padding: 0 30px;
  overflow-y: scroll;
  box-sizing: content-box;
}

.overflow-auto {
  overflow: auto;
}

<div class="w-100 position-fixed position-trbl-0">
  <div class="container-fluid position-relative position-trbl-0 overflow-hidden h-100">
    <div class="row">
      <div class="col">
        <div class="col-inner">
          <p class="p-4">
          <!-- Insert your important text here -->
          </p>
        </div>
      </div>
      <div class="col">
        <div class="col-inner">
          <p class="p-4">
          <!-- Insert your additional details here -->
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

However, I am having trouble implementing it effectively!

Answer №1

Here is a solution using a grid layout and the :nth-child() pseudo-class for the col class.

The first column takes up 2/3 of the space, while the second column takes up 1/3.

.position-trbl-0 {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}  


.overflow-hidden {
   overflow: hidden;
}

.row {
  display: grid;
  grid-template-columns: auto auto auto;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.col {
  height: 100%;
  padding: 0 20px;
  overflow: hidden;
}

.col:nth-child(1) {
  grid-column: 1 / span 2;
}

.col-inner {
  height: 100%;
  width: 100%;
  padding: 0 30px;
  overflow-y: scroll;
  box-sizing: content-box;
}

  .overflow-auto {
    overflow: auto;
  }
<div class="w-100 position-fixed position-trbl-0">
  <div class="container-fluid position-relative position-trbl-0 overflow-hidden h-100">
    <div class="row">
      <div class="col">
        <div class="col-inner">
          <p class="p-4">
          [Your custom content goes here]
          </p>
        </div>
      </div>
      <div class="col">
        <div class="col-inner">
          <p class="p-4">
          [Your custom content goes here]
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

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

Why doesn't AngularJS validation function properly with input elements of type "number"?

Struggling with Angularjs validation here. Ng-pattern seems to work fine only when the input type is text. However, when the input type is number, ng-pattern doesn't seem to work, although required, min, and max attributes still function. <input t ...

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

No content in Django's Bootstrap dropdown menu

I need assistance with extracting a list of objects and placing them in a dropdown menu. I have successfully achieved this, but the issue seems to be related to my HTML structure. Here is the code snippet from my HTML: <div class="dropdown"> < ...

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

Boosting Your Theme - Eliminating Redundant Styles

Currently, I am facing more of a best practice issue rather than a coding one. I am in the process of creating a custom bootstrap theme inspired by https://github.com/HackerThemes/theme-kit. Although I have a functional theme that I am satisfied with, I am ...

Tips for showcasing the contents of a file on a website

Greetings! I am a newcomer to the world of web development and I am seeking a method to showcase file content on a webpage. Presently, I have succeeded in loading text file content and displaying it in a large text box. However, I am now interested in di ...

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

Problem with the appearance of the drop-down menu

After a few dedicated weeks on a Web application project, I am currently tackling the challenge of a drop-down menu. Despite its functionality, there are two specific points I need help with: When expanding the menu by selecting a main item, I want to pr ...

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

Issue with Hiding Bootstrap Tabbed Content Correctly

I am currently struggling to make a Bootstrap tab field function correctly, encountering some obstacles along the way. While the content is successfully tabbing between each div, the issue I'm facing is that the content from each tab is actually bein ...

Switch Image to Background Image on Mobile Devices

I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...

What is the method for selecting an li element within a ul list using Selenium in Python?

My goal is to automate the process of clicking on 'National Data' on a specific website using the Selenium package in Python. The website I am referring to can be found at . Although I attempted to achieve this automation, I encountered difficul ...

Embed a video within an image while ensuring it remains responsive on all devices

I have a picture that resembles something like this one My goal is to embed a video into it while maintaining its aspect ratio when the screen size is reduced. The responsive design should only affect the width since the image will be displayed in portrai ...

Remove all HTML tags except for those containing a specific class

Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...

What are the steps to modify the MIME type in order for the browser to correctly display a CSS

I'm encountering an issue where my CSS code is not rendering in the browser, and it seems to be related to MIME types (which I'm not familiar with). I am using EJS as a template engine. The error I see in the console is... Refused to apply sty ...

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

When using onclick="location.href='page.html'", the page fails to load on Safari browser

I've been having trouble with getting onclick="location.href='link.html'" to work and load a new page in Safari (5.0.4). In my project, I am creating a drop-down navigation menu using the <select> and <option> HTML tags. I have ...

Choose to automatically update the page after adding new information

The information is displayed in this format: <select class="custom-select col-md-10" id="routeList" size="8"> <option selected>Choose...</option> <?php include( '../cnn.php' ); $query= $db ...