Aligning two divs vertically within another div without relying on the display:flex property

Question

Aligning two divs vertically within another div without relying on the display:flex property

My goal is to align the content of two divs to the top within a parent div.

I am unable to use display: flexbox, and it needs to be implemented as inline CSS. Currently, the layout appears as intended when the description div has only one line. However, if the description spans multiple lines, the number div appears above the description div. This is my current code:

<!--Single line-->
<div style="margin:10px 0 10px 0;">
  <div style="display:inline-block; vertical-align:top"> 1.1</div>
  <div style="margin-left:50px; display: inline-block; vertical-align:top;">
    Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
  </div>
</div>

<!--Multiple lines-->
<div style="margin:10px 0 10px 0;">
  <div style="display:inline-block; vertical-align:top">1.2</div>
  <div style="margin-left:50px; display: inline-block; vertical-align:top;">
    Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad. No unum appellantur sea, assum oratio legere has et, est lorem concludaturque
    id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior
    has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer. Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
  </div>
</div>

I would like each item to be displayed similar to 1.1: https://i.sstatic.net/OcFMS.jpg

html css

Answer 1

Answer №1

Assuming that inline elements are in use, I see no reason why tables shouldn't be included 😄

<table>
  <tbody>
    <tr>
      <td style="width: 3rem; vertical-align: top">1.1</td>
      <td>
        <p style="margin-top: 0;">
          Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
        </p>
      </td>
    </tr>
    <tr>
      <td style="width: 3rem; vertical-align: top">1.2</td>
      <td>
        <p style="margin-top: 0;">
          Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad.

          No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer.

          Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
        </p>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Assuming that inline elements are in use, I see no reason why tables shouldn't be included 😄

<table>
  <tbody>
    <tr>
      <td style="width: 3rem; vertical-align: top">1.1</td>
      <td>
        <p style="margin-top: 0;">
          Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
        </p>
      </td>
    </tr>
    <tr>
      <td style="width: 3rem; vertical-align: top">1.2</td>
      <td>
        <p style="margin-top: 0;">
          Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad.

          No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer.

          Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
        </p>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

To solve your issue, you must remember to specify a width for your container.

.number {
  display: inline-block;
  vertical-align: top;
}

.text {
 display: inline-block;
 width: 80%;
}

//One line
       <div>
            <div class="number"> 1.1</div> <div class="text">
        Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
    </div>
        </div>

//Multiple lines
<div>
    <div class="number">1.2</div> <div class="text">
    Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad.

    No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer.

    Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
</div>
</div>

Using flexbox is the most effective way to achieve this.

.container {
  display: flex;  
}

.space {
 margin-right: 10px;
}

//Single line
       <div class="container">
            <div class="space">1.1</div>
            <div>
              Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
            </div>
       </div>

//Multiple lines
<div class="container">
    <div class="space">1.2</div> <div>
    Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad.

    No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer.

    Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
</div>
</div>

Answer 4

To solve your issue, you must remember to specify a width for your container.

.number {
  display: inline-block;
  vertical-align: top;
}

.text {
 display: inline-block;
 width: 80%;
}

//One line
       <div>
            <div class="number"> 1.1</div> <div class="text">
        Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
    </div>
        </div>

//Multiple lines
<div>
    <div class="number">1.2</div> <div class="text">
    Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad.

    No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer.

    Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
</div>
</div>

Using flexbox is the most effective way to achieve this.

.container {
  display: flex;  
}

.space {
 margin-right: 10px;
}

//Single line
       <div class="container">
            <div class="space">1.1</div>
            <div>
              Lorem ipsum dolor sit amet, pertinax honestatis suscipiantur mea eu, populo invidunt nam ne, nulla similique usu et. His accusata definitionem in.
            </div>
       </div>

//Multiple lines
<div class="container">
    <div class="space">1.2</div> <div>
    Id harum paulo bonorum vim, sit adhuc aliquid oportere in, ei quo dicta labitur salutatus. Debet doctus facilis ius ad, assum expetendis vix ex. Modus nostro concludaturque nec ad.

    No unum appellantur sea, assum oratio legere has et, est lorem concludaturque id. Ex pro audire nostrud, vel sale dissentias an, eos no zril vocibus principes. Noluisse praesent mei ea. Eam intellegat omittantur ea, sit tacimates quaestio definitiones ei. Et vix appareat reprehendunt, at cum alii aliquando, audire iuvaret instructior has eu. Sea id placerat ponderum, ea has deserunt assentior consectetuer.

    Nobis denique nominavi qui ut, cu prima idque perfecto eos. Quo soleat possit impedit eu. Id mucius graeci noluisse his. Sanctus appareat usu ne, per ea purto tractatos deterruisset.
</div>
</div>

Aligning two divs vertically within another div without relying on the display:flex property

Answer №1

Answer №2

Similar questions

The setLanguage function in jsPDF does not support rendering different language characters

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

Issue with Ionic3: When using ElementRef nativeElement.getElementsByClassName, the returned collection is inaccessible

I am looking for a way to locate all meta tags that begin with either "ABC_" or "XYZ_" by using jQuery

Learn how to dynamically disable or hide the "Today" button in an angular-ui datepicker based on whether it is the weekend

Customize the background color of a particular select element within an array of dynamically created select elements

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Adjust the background color of the body content to reflect changing content

Tips for creating a versatile text with javascript

Exploring MaterialUI withStyles to customize disabled switches with a CSS override

JavaScript refuses to connect with HTML

Complete visibility of Bootstrap progress labels is compromised

Insert a span element before an HTML input using JavaScript

Developing an interactive URL in an HTML page for a Flask web application

Updating pictures on Bootstrap's project showcase template

The jquery function is not operating as anticipated

Is there a way to align both JSX elements in a single row without having one overlap the other?

display select items from a webpage

The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

Setting a value in a numeric input field - a step-by-step guide