What is the best way to configure this DIV layout with a right-aligned div on the left and a left-aligned div on the right?

I am in the process of creating 2 separate DIVs, one displaying Right-aligned content (the labels) and the other div showcasing Left-aligned content (the details for each label).

My goal is to establish a connection between each label and its corresponding child content on the right side. This way, even if they are pushed down by content above them, they will still stay linked together.

What would be the most effective approach to achieving this layout that is compatible with various web browsers? (A visual example is provided in the attached JPG).

Answer №1

Aligning the content can be tricky, especially if it is variable in nature and prone to changing height.

To ensure that the right hand features always line up with their associated left hand content, you can use the following CSS:

ul {
    list-style: none outside none;
    margin-left: 150px;
}

ul li h3{
    position: absolute;
}

ul li span {
    position: relative;
    display: block;
    width: 150px;
    text-align: right;
    left: -150px;
}

In your HTML, structure it like this:

<ul>
    <li>
        <h3><span>Feature 1</span></h3>
        <p>Content 1<br />Content 1</p>
    </li>
    <li>
        <h3><span>Feature 2</span></h3>
        <p>Content 2<br />Content 2</p>
    </li>
</ul>

This solution may give you some ideas for how to approach the alignment of your content. Alternatively, you can also use a simpler method using floats:

.left, .right {
    float: left;
}

.left {
    clear: left;
    width: 150px;
    text-align: right;
}

And in your HTML:

<div class="left">feature</div>
<div class="right">content<br />content</div>

<div class="left">feature</div>
<div class="right">content<br />content</div>

Answer №2

Although it is encouraged to avoid using tables for non-tabular data, this particular table is semantically correct and serves its purpose well within the HTML structure. Even a table with just a few rows and columns still functions as a proper table. In fact, in real-world scenarios, tables with two columns and numerous rows are quite common.

Answer №3

It appears that divs can contain classes positioned either to the left or right within their parent element.

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

"Despite attempts to use workarounds, inline-block elements still create unnecessary line breaks due to their inherent

My header is behaving unexpectedly when I break a sentence into separate elements. I have attempted all the suggested solutions here: How do I remove the space between inline-block elements?. I even tried applying font-size: 0 to the parent element. The e ...

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

Trying to figure out how to create an HTML element similar to this: <option value="Replaced">by this</option> For example: <option value="ThisIsTest">ThisIsTest</option> UPDATE Using jQuery, I need to achieve something like thi ...

Can the width of an offcanvas panel be adjusted?

Currently implementing the offcanvas component in my project, but I'm looking to make the panel wider than the standard size. Specifically, I want it to be 35% width. I've attempted to utilize the panelClass NgbOffcanvasOptions property, however, ...

Tips for adjusting the width of a div based on a variable

I'm working on an editable table and I need to dynamically adjust the width of a div whenever the content in a td changes. It seems like my jQuery code isn't doing the trick. Any suggestions on how to fix this issue? var form = document ...

Tips for adding extra spacing between icon and text field using Vuetify

The code snippet below is used for the username section: <v-text-field prepend-icon="fas fa-user" height="60px" placeholder="Username" outlined ></v-text-field> Is there a way to add space between the user ...

The HTML division with text positioned at the top and bottom

For my project, I am looking to make a <div> with a height of 200px that contains text at both the top and bottom. My goal is for this design to be compatible with all popular web browsers. Despite experimenting with different combinations of align ...

What is the best way to create rounded corners for a side menu in an Ionic application using ion-menu in its native form

After extensive research and exploring XCode, I have been unable to achieve the desired venmo style rounded corners for my iOS application. It seems that iOS is not adhering to the sass rules I have specified. The styling of the side menu is dictated by a ...

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

Is there a way to personalize the link in a Cognito confirmation email?

Users who register through my application will receive an email from Cognito containing a verification link. AWS Cognito offers a template ({## text ##}) that will be converted into a link, such as <a href='link-to-confirm'> text </a> ...

I can't seem to get the button to function properly, and it's really

I am having an issue with my "Let's Get Fit" button. When I hover over it or click it, the cursor doesn't change and it doesn't lead to index.html. I'm not sure why it's not working. .btn { display: inline-block; text-transf ...

Changing the container's height in an HTML document

enter image description hereim struggling to change the height of the white dash container, and I can't quite figure out how to do it. Here is the code, any help would be appreciated: analytics.html : {% extends 'frontend/base.html' %} {% l ...

Tips for hovering over child or nested <li> elements

Take a look at the provided code snippet below. The structure is <ul> <li>text1</li> <li> <ul><li> text2 </li> <li> text3 </li> </ul> </li> </ul> T ...

Issues with the responsiveness of Bootstrap 4.5.0 grid system

While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to t ...

What is the best way to implement CSS properties dynamically in real-time?

Hey there, I’m working with some HTML code here <div id="div1"></div> I’m dynamically loading content onto this div and adjusting its width in the "success" function based on the contents Here’s the jQuery code snippet I’m using Th ...

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Situation: I want to create a Zingchart graph from a CSV file containing 37 columns. The header in the CSV file will be used as the legend for the graph. Issue: When I define less than 10 elements in the header (including the X-axis name), everything wo ...

Is there a way to extract the data enclosed by "<div>" and "</div>" utilizing python's sgmllib or parser module?

This is the HTML snippet provided: <div id="wrap"> <div id="content"> <h1>head</h1> <ul class="jobpara"> <li class="floatl"><span>time:</span>2013-08-13</li> <li clas ...

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

The positioning of the second wrapper in absolute does not match the behavior of the first wrapper

Working with CSS can be tricky, especially when dealing with nested navigation elements. I am facing an issue where the styles that work perfectly for one dropdown menu do not function as expected for subsequent nested navigations. My objective is to disp ...

Looking for PHP function recommendations!

I need some help with creating a function in my PHP page. I want to create a function that can transfer a value from Field A to Field B. Here is my current code: <table class="table table-hover table-bordered"> <thead> <tr> <th ...

Basic single-page application on the web using API and MONGOOSE (problem with identification tags)

Currently, I am in the process of developing a basic AngularJS SPA that connects to Mongoose through an API. The main functionality of this app is to add a new member, display the list of members, and allow for editing of individual members by clicking on ...