What is the best way to align the subsequent sub-elements to the right edge of the initial child element in a left alignment

Here is the HTML snippet I am working with:

.entry{
  border: 1px solid gray;
}

.list_number{
  color: red;
  border: 1px dashed gray;
  margin-right: 5px;
}

.entry_body{
    border: 1px solid green;
}
<div class="entry">
    <span class="list_number">1.</span> only before noun very great, or complete used for emphasizing an opinion, feeling, or statement
    <div class="entry_body">The way they’ve been treated is an absolute disgrace.<br/>
        I have absolute confidence in her.<br/>
        You’re talking absolute nonsense.<br/>
    </div>
</div>

Is there a way to align the left border of .entry_body to the right border of .list_number?

css

Answer №1

I made some adjustments to your code, but I believe I have successfully achieved what you desired with the use of CSS grid. You now have the flexibility to input numbers ranging from single digits to three-digit numbers or more for the entry list number.

.entry{
  border: 1px solid gray;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:  
    "number span"
    ". entry";
}

.list_number{
  grid-area: number;
  color: red;
  border: 1px dashed gray;
  margin-right: 5px;
}

.entry_body{
    border: 1px solid green;
   grid-area: entry;
}
.span {
  grid-area: span;
}
<div class="entry">
   <span class="list_number">123</span>
   <span class='span'> only before noun very great, or complete used for emphasizing an opinion, feeling, or statement</span>
   <div class="entry_body">The way they’ve been treated is an absolute disgrace.<br/>
        I have absolute confidence in her.<br/>
        You’re talking absolute nonsense.<br/>
    </div>
</div>

Answer №2

Does this meet your requirements? I have applied a margin-left: 15px; to the .entry_body class. Additionally, I noticed an issue with your HTML structure, so I placed a sentence within a <span> tag for correction: "only before noun very great, or complete used for emphasizing an opinion, feeling, or statement"

.entry{
  border: 1px solid gray;
}

.list_number{
  color: red;
  border: 1px dashed gray;
  margin-right: 5px;
}

.entry_body{
    border: 1px solid green;
    margin-left: 15px;
}
<div class="entry">
    <span class="list_number">1.</span>
  <span> only before noun very great, or complete used for emphasizing an opinion, feeling, or statement</span>
    <div class="entry_body">The way they’ve been treated is an absolute disgrace.<br/>
        I have absolute confidence in her.<br/>
        You’re talking absolute nonsense.<br/>
    </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

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

utilizing a dynamic value within CSS modules for class naming

Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...

cssreactjsnext.jscss-modulesreact-css-modules

Placing text on top of an input field using HTML and CSS

I am currently in the process of creating a website for my high school that will allow students to access their class schedules online. To differentiate each class, I have assigned them different background colors. This is achieved on the main page by adju ...

htmlcss

Tips for ensuring your jQuery events always trigger reliably: [Issues with hover callback not being fired]

My background image animation relies on the hover callback to return to its original state. However, when I quickly move the mouse over the links, the hovered state sticks. I suspect that I am moving the mouse off before the first animation completes, caus ...

javascriptjqueryhtmlcss

What is the best way to enhance the visibility of the navigation items in my Bootstrap 4 navbar?

While working with Bootstrap 4, I encountered an issue where the text navigation items in the navbar were appearing semi-transparent regardless of my efforts to adjust the code. The dark blue background color of the navbar was causing the opacity to make i ...

htmlcssbootstrap-4

When text is wrapped within the <li> tag

In this div, the structure is as follows: <div class="box1" id="infobox"> <h2> Point characteristics: </h2> <div style="padding-left:30px" align="left"> <ul> <li class="infobox_list"><b>X value: </b>< ...

javascriptjqueryhtmlcss

Adjust the size of divs using JQuery UI's draggable feature

Looking for a way to make two divs share 100% of their parent's width, with a dynamic resizing feature in between them? Check out my solution here: http://jsfiddle.net/aRQ7a/ However, I'm facing an issue where when I decrease the size of the pre ...

javascriptjqueryhtmlcssjquery-ui

Validation message causing Bootstrap form inline to lose center alignment

Could someone please assist me with form inline in Bootstrap? I am trying to ensure that all inputs are of the same height (or centered), but I'm facing an issue when a validation message is displayed. DEMO: http://codepen.io/Tursky/pen/gpvgBL?editor ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Uncover each image individually

I have a task in React where I am displaying a list of images using the map method, and I want to reveal each image one by one after a delay. The images I am working with can be seen here and I need them to be revealed sequentially. The following code sni ...

javascriptcssreactjs

How to position a "figure" element at the center using CSS creatively (without relying on Div elements)

Struggling with my first website creation, I encountered a challenge in centering three inline-block images using CSS. Despite successfully using the figure tag to title and display the images, I couldn't get them to align horizontally from the cente ...

csshtml

Is there a way to adjust the brightness of specific sections within an image using html, css, and js?

I am working on a project where I have an image with tags underneath that correspond to different parts of the image. For example, if the image is of a dog, one of the tags could be 'nose', indicating the portion of the image around the dog' ...

javascripthtmlcssfrontend

Pop-up alert for text sections that are longer than a specific character limit

As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal ov ...

javascriptjqueryhtmlcss

Tips for customizing the appearance of WordPress posts with unique classes and styles

I'm experimenting with adding a unique class to certain posts in order to apply a different style. I've been playing around with the post_class function, but I'm still unsure of how to achieve this. Does anyone have any suggestions? <?ph ...

phpcsswordpressstyles

Create a DIV element that completely fills the vertical space available

My webpage is currently looking quite empty, with only one DIV element present: <div style="height: 20%; min-height: 10px; max-height: 100px; width: 100%; background-color: blue;"></div> I' ...

csshtml

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...

javascriptjqueryhtmlcss

Preventing text and images from distorting when zooming on a website

Currently, the HTML page I'm working on has some issues when zoomed in. The paragraphs seem to break out of their designated area and display as vertical lines of text instead of staying horizontal. Additionally, the pictures on the site become overly ...

htmlcss

Menu manipulation: Shifting menus left and right with a click

Take a look at this link. There are 12 menu items, but only 4 are visible due to space constraint. The rest are hidden. Update: Jsfiddle cleaned up and removed my fiddle. I have provided an alternative link above. There was a missing jQuery part in my que ...

javascripthtmlcsstwitter-bootstrap

Sass includes line-specific comments to indicate where a certain definition is located

There seems to be a strange occurrence when I save my file and it's generated by Compass. Each declaration is followed by a comment indicating the line of the sass file, like this: /* line 55, ../sass/app.scss */ In addition, my config.rb file conta ...

csssasscompass-sass

How to make inline divs wrap to the next line once a set number of divs have been displayed

I have a main div containing multiple smaller square divs, set up like this: <div class="container"> <div class="little-square"></div> <div class="little-square"></div> <div class="little-square"></div&g ...

htmlcss