Guidelines for applying CSS to the given information

How can I style the page within the same div to display the data in the following format with multiple sub-parts?

                                              abcde
                       a production           productions
                                              limited 
   total
                                              jackson 
                       b productions          productions
                                              limited

I have tried using the following CSS:

.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
    margin:0 10px 0 0;

    word-wrap:break-word;

   }
.text_right22 {
width: 20%;
float:left;
text-align:center;

}
.text_right23 {
width: 55%;
float:left;

}

And here is the HTML structure:

<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div> 
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>

However, the styling is not working as expected when there are more sub-parts.

Answer №1

If you want to make things simpler, consider using tables with rowspan. You can also utilize CSS to adjust the width and margins of the cells. Here is an example:

<!DOCTYPE html>
<html>
<body>


<table >

<tr>
  <td rowspan="9">total</td>

</tr>
<tr>
  <td rowspan="4">a production</td>


</tr>

<tr>
<td>abcde</td>


</tr>
<tr>
<td>productions</td>


</tr>
<tr>
<td>limited</td>


</tr>

<tr>
  <td rowspan="4">a production</td>


</tr>
<tr>
<td>jackson</td>


</tr>

<tr>
<td>productions</td>


</tr>
<tr>
<td>limited</td>


</tr>


</table>


</body>
</html>

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

Is it possible to alter the content of an HTML element by utilizing PHP Include?

I am facing an issue with a PHP header setup similar to this: <body> <h1>Title</h1> </body> This code is in a file named header.php, but when I navigate to another page and include the header.php file like this: <?php include( ...

Why isn't my CSS transition animation working? Any suggestions on how to troubleshoot and resolve

I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like ...

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

How to troubleshoot Bootstrap 5 tabs not hiding flex content after tab change?

Bootstrap 5 tab features a Leaflet map that we intend to occupy all remaining space once selected. We managed to achieve this, but now, when switching tabs, the content area of the first tab does not disappear. We suspect that the issue might be related t ...

Main-container div in Bootstrap CSS sliding beneath the side navigation bar

I recently acquired a Bootstrap 4 theme and have been modifying some files to make it compatible with Flask. However, I'm facing an issue where the "main-container" div falls below the nav bar when I resize the page to full desktop browser size. In th ...

Using PHP variables in JavaScript to access getElementById

I have multiple forms displayed on a single PHP page. They all follow a similar structure: <form id="test_form_1" action="test_submit.php" method="post" name="test_form"> <label>This is Question #1:</label> <p> &l ...

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

Creating a CSS image grid without relying on object-fit: cover can be achieved by

My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques. All the solutions I've found so far involve object-fit: cover, which c ...

Having difficulty in successfully transmitting a dictionary via AJAX (POST) to Python (Django views) resulting in an empty dictionary every time

When I include this script in the head of the HTML : <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> and then use a button to call a function: <div> ...

How can I add a loading page to my HTML/CSS website?

Currently, I am delving into the realm of coding and have encountered an issue while trying to integrate a loading page into my HTML. Despite referencing the code from this source, it appears that the loading page is not functioning as intended. Any assist ...

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

Tips for directing user focus to a text field when they click on a disabled href link

I currently have a website where I need to disable href links for users with pending statuses. I want these users to fill in details and press a submit button before proceeding to other pages. How can I set it up so that when a user clicks on a disabled li ...

Implementing a Vue.js Scrollable Table

I am currently working on a table that is populated using the vue.js v-for method: <table> <tr><th>Name</th><th>Surname</th></tr> <tr v-for="user in users"><td>@{{user.name}}</td><td>@{ ...

Tips for choosing an option from a list of options using Selenium with Python

Attempting to select an option from a webpage using Selenium-Python has proven challenging. Despite obtaining the xpath and css selector of the element, all attempts to locate it for clicking have failed. Research indicates that the element may be within a ...

CSS animation - gradual disappearance on mouse exit

Hey everyone, I'm in need of some assistance with my animation. I've created a button that moves right and left in a loop, but I'm encountering an issue when the mouse moves away from the button. The transition is not smooth and it jumps bac ...

What is the best way to expand a div in a downward direction exclusively?

My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions. Initial state of the two divs: https://i.sstatic.net/cWYyV.png Outcome after clicking on div 2: ...

Having trouble getting CSS hover to work on hidden elements?

I am having trouble getting the rollover effect to work correctly on this page, and I can't seem to figure out what's causing the issue. My CSS is quite basic: open{visibility:hidden;} open:hover{visibility:visible;} If you would like to take ...

Is it beneficial to incorporate AJAX functionality into my PHP classes and scripts?

I recently started working on a PHP/AJAX website and I'm contemplating the best approach to "only include the content". Should I incorporate if statements in my header and footer scripts to check for a "ContentOnly" get parameter? Then, append that p ...

Adjusting elements in Material UI without distorting them

Struggling with resizing a select component from material UI led to some unexpected challenges. Despite attempting to adjust the size using the className property, the label ended up misaligned and the selection shade appeared larger than the select box it ...