What is the best way to position two divs side by side at the bottom of the

When trying to align my second div with the first one, I face an issue. If the text above the first blue box is longer, the second div appears to be outside the line of the box. Changing the relative position doesn't solve this problem either. When the text above the blue box is shorter, the second box ends up looking misplaced below, which is not ideal. Since all values are dynamic, manual adjustments won't work for me.

.char-span {
    font-size: 13px !important;
    display: block;
    margin: 0px !important;
}

.bot-char-all {
    margin-top: -10px;
    float: left;
    min-width: 120px;
}

.bot-char {
    padding-top: 5px;
    float: left;
}

char {
    margin-bottom: 5px;
    margin-right: 20px;
    width: 200px;
    display: inline-block;
}
.char-pre {
    margin-top: 5px;
    padding: 10px 5px;
    border: 2px solid #192E7B;
}
.box-vals {
    margin-right: 50px;
    float: left;
    margin-bottom: 10px;
}
.char, .char-value {
    display: inline-block;
    width: 100px;
}
.char-pre-val.snow-val {
    background: #CFD1AF;
}
.char-pre-val {
    margin-top: 5px;
    padding: 10px;
    color: white;
}
.char-val-span {
    margin: 0 auto;
    display: table;
    font-size: 20px;
    position: relative;
    top: 2px;
}
<div class='bot-column'>

  <div class='bot-char-val'>
    <div class='bot-char-all'>
      <div class='bot-char'>
        <div class='char'><span class='char-span'>Characteristic value of snow load</span>
          <div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
        </div>
      </div>
    </div>
    <div class='box-vals'>
      <div class='char-value'><span class='char-span'>Snow</span>
        <div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
      </div>
    </div>
  </div>

</div>

htmlcss

Answer №1

Experience the classic CSS alignment technique using flex.

To enhance the styling of .bot-char-val, consider adding the following code:

.bot-char-val {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
}

Furthermore, eliminate floats and margins from the following classes:

.box-vals {
  float: none;
  margin-bottom: 0;
}
.bot-char-all {
  float: none;
}


.char-span {
    font-size: 13px !important;
    display: block;
    margin: 0px !important;
}

.bot-char-all {
    margin-top: -10px;
    float: left;
    min-width: 120px;
}

.bot-char {
    padding-top: 5px;
    float: left;
}

char {
    margin-bottom: 5px;
    margin-right: 20px;
    width: 200px;
    display: inline-block;
}
.char-pre {
    margin-top: 5px;
    padding: 10px 5px;
    border: 2px solid #192E7B;
}
.box-vals {
    margin-right: 50px;
    float: left;
    margin-bottom: 10px;
}
.char, .char-value {
    display: inline-block;
    width: 100px;
}
.char-pre-val.snow-val {
    background: #CFD1AF;
}
.char-pre-val {
    margin-top: 5px;
    padding: 10px;
    color: white;
}
.char-val-span {
    margin: 0 auto;
    display: table;
    font-size: 20px;
    position: relative;
    top: 2px;
}

.box-vals {
  float: none;
  margin-bottom: 0;
}
.bot-char-all {
  float: none;
}
.bot-char-val {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
}
<div class='bot-column'>

  <div class='bot-char-val'>
    <div class='bot-char-all'>
      <div class='bot-char'>
        <div class='char'><span class='char-span'>Charakteristischer Wert der Schneelast</span>
          <div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
        </div>
      </div>
    </div>
    <div class='box-vals'>
      <div class='char-value'><span class='char-span'>Snow</span>
        <div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
      </div>
    </div>
  </div>

</div>

Answer №2

If you apply the CSS property display flex to the parent element and then use align-self: flex-end; on the child element, it will resolve your issue.

.char-span {
  font-size: 13px !important;
  display: block;
  margin: 0px !important;
}

.bot-char-all {
  margin-top: -10px;
  float: left;
  min-width: 120px;
}

.bot-char {
  padding-top: 5px;
  float: left;
}

char {
  margin-bottom: 5px;
  margin-right: 20px;
  width: 200px;
  display: inline-block;
}

.char-pre {
  margin-top: 5px;
  padding: 10px 5px;
  border: 2px solid #192E7B;
}

.box-vals {
  margin-right: 50px;
  float: left;
  margin-bottom: 10px;
}

.char,
.char-value {
  display: inline-block;
  width: 100px;
}

.char-pre-val.snow-val {
  background: #CFD1AF;
}

.char-pre-val {
  margin-top: 5px;
  padding: 10px;
  color: white;
}

.char-val-span {
  margin: 0 auto;
  display: table;
  font-size: 20px;
  position: relative;
  top: 2px;
}

.box-vals {
  align-self: flex-end;
  margin-bottom: 0;
}

.bot-char-all {
  align-self: flex-end;
}

.bot-char-val {
  display: flex;
  flex-flow: row nowrap;
}
<div class='bot-column'>

  <div class='bot-char-val'>
    <div class='bot-char-all'>
      <div class='bot-char'>
        <div class='char'><span class='char-span'>Characteristical Value of Snow Load</span>
          <div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
        </div>
      </div>
    </div>
    <div class='box-vals'>
      <div class='char-value'><span class='char-span'>Snow</span>
        <div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
      </div>
    </div>
  </div>

</div>

Answer №3

Here is a simple demonstration using flex-box:

.bot-column {
  max-width: 220px; /* for demo purposes */
}

.bot-char-val {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
}

.bot-char-all, 
.box-vals {
  padding: 1em;
  width: 50%;
}

.char-pre {
  border: 2px solid #192E7B;
  padding: 0.2em 1em;
}

.char-pre-val {
  background: #CFD1AF;
  color: white;
  padding: 0.2em 1em;
}
<div class='bot-column'>
  <div class='bot-char-val'>
  
    <div class='bot-char-all'>
      <div class='bot-char'>
        <div class='char'><span class='char-span'>Characteristic Value of Snow Load</span>
          <div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
        </div>
      </div>
    </div>
    
    <div class='box-vals'>
      <div class='char-value'><span class='char-span'>Snow</span>
        <div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </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

Accessing a hyperlink within the existing page

How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...

html

Is it possible for the vertical borders of <span> to overlap?

When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack. Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/ .html: <span><span>a& ...

css

The Proper Usage of Commas in CSS

Check out this CSS code snippet. .form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;} .form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} .form-field TEXTAREA {height ...

htmlcsscss-selectors

Using CSS and JavaScript to create a gradient-style opacity effect for smoothly fading out content

Is there a way to achieve a gradient fade effect on the opacity of an iframe and its content? To provide an illustration, think of the bottom of the notification centre in Mountain Lion or iOS. The concept involves having the content within an iframe grad ...

cssiframescrollopacitygradient

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

I encountered a persistent error that I just can't seem to resolve. My goal is to showcase a chart using Chart.js when the mouse hovers over the canvas. However, upon hovering over the canvas, I keep getting a TypeError: t is null error. Error: { ...

javascripthtmlcanvaschartschart.js

Showing hidden errors in specific browsers via JavaScript

I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...

javascriptandroidjqueryhtml

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

jqueryhtmlcssscroll

If TextBoxes overlap, the one that is defined earlier in the ASPX file cannot be clicked on

Managing the visibility of multiple controls can be tricky, especially when they have overlapping coordinates. Take for example two TextBoxes, txtName and txtEmail, positioned at the same x/y coordinates: <div style="position: absolute; top: 55px; ...

c#htmlasp.net

When seen on a mobile device, the background image is set to repeat along the

Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is neces ...

htmlcssresponsive-design

Tips for initiating a function at a designated scroll point on a webpage

Currently, I am testing out a code snippet that allows images to flip through in a canvas element. I'm curious if it's possible to delay the image flipping effect until the viewer scrolls down to a specific section of the page where the canvas i ...

javascripthtmljquerycanvashtml5-canvas

Exploring the ins and outs of HTML event handlers with JavaScript

When using events in your HTML and including a small amount of JavaScript, what is this called? Is it referred to as a "JavaScript attribute function," simply a "JavaScript attribute," or something else entirely? For example: <button onClick="locat ...

javascripthtmldom-events

Enliven the transition between grid sizes

I'm currently working on a project using React and Material UI. Seeking assistance on how to implement an animation for changing the size of a grid item. By default, the item is set to sm={3}, but when a user hovers over it, I want it to change to sm ...

cssreactjsmaterial-uijss

Attempting to place the search bar within the navigation bar

Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far. Any assistance would be greatly appreciated, thank yo ...

javascripthtmljquerycss

Struggling with formatting images to ensure consistency in size using HTML and CSS

Currently, as a novice in HTML and CSS, I am encountering image misalignment issues while attempting to make them uniform in size. How can this be rectified? The existing HTML code is shown below: <div class="container text-center"> <h3> ...

htmlcss

Easy steps to launch Excel application with an HTML button using a web browser

How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...

javascriptjqueryhtml

Crop images in a canvas using a customized rectangle with the help of JQuery

I am trying to crop an image inside a Canvas element using a selection rectangle. My project utilizes jQuery and I am in search of a plugin that can help me implement this custom selection rectangle on the canvas itself, not just on images. Are there any ...

javascriptjqueryhtmljquery-pluginshtml5-canvas

Shuffle contents of a Div randomly

I'm currently in the process of developing a new website and I need to randomly move the news feed. To achieve this, I have created an array containing the list of news items. The array is then shuffled and placed within the news feed section. Althou ...

javascriptjqueryhtmlcss

Focus on input using jQuery (fixed focus)

How can I ensure that my input always has value and the focus remains fixed on it until values are typed, preventing the cursor from escaping the input field? While I know the existence of the focus() function, how can I effectively utilize it as an event ...

javascriptjqueryhtml

What could be the reason for the css problems being caused by my flash banner?

My flash banner ad is being displayed on a website as an advertisement at the bottom of the page. Whenever the banner ad is shown, the scroll bar disappears. The following CSS code appears when the flash banner is active: body {margin: 0; padding: 0; over ...

htmlcssflash

Positioning Tool Tips with Material Design Lite

While utilizing MDL tooltips (), the tooltip typically displays just below the <div> it is linked to. I am aiming for the tooltip to show up to the right of the referenced element, rather than beneath it. My attempt to adjust the appearance in styl ...

htmlcssmaterial-designmaterial-design-lite