How to place two divs on one bottom line?

Question

I want my second div to be on the same position with the first one. If text above first blue box is longer, than my second div appears like it off the box line. Changing relative position would not make it better, if the text above blue box would be shorter, than second box appears more below and it looks awful. All values changed dynamically, that why i need not just change position manually.

.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'>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>

Does this answer your question? [CSS two div width 50% in one line with line break in file](https://stackoverflow.com/questions/10698636/css-two-div-width-50-in-one-line-with-line-break-in-file) or [any of these?](https://stackoverflow.com/search?q=two+divs+one+line) — Rob, Mar 19 '20 at 10:53

avcajaraville · Answer 1 · 2020-03-19T10:47:36.203

2

This is classic CSS aligment with flex.

Try adding the following to .bot-char-val:

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

And remove floats and margins from:

.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>

edited Mar 19 '20 at 10:47

answered Mar 19 '20 at 10:30

avcajaraville

9,041
2
28
37

mmm... It is the same – Nar Jovan Mar 19 '20 at 10:33
No its not. I added changes at the bottom of the CSS, run code snippet and you will see. – avcajaraville Mar 19 '20 at 10:34
Snippet shows me the same result as i have in my version. – Nar Jovan Mar 19 '20 at 10:36
Its impossible, I added two classes. Click on run code snippet, this is not the same as you have. I even wrote the css you need to add at the top of my answer. – avcajaraville Mar 19 '20 at 10:37
This classes were added: .box-vals { float: none; margin-bottom: 0; } .bot-char-all { float: none; } .bot-char-val { display: flex; flex-flow: row nowrap; align-items: end; } – avcajaraville Mar 19 '20 at 10:38
@NarJovan said the truth your code snippet show the exact example as the question. See by yourself – johannchopin Mar 19 '20 at 10:39
Oh my god, this is crazy, you guys know you can scroll ? I added three classes on the CSS section. :D – avcajaraville Mar 19 '20 at 10:42
It was a mistake, align-items: end; should be align-items: flex-end; I was testing on FF. So yeah, I got that bad. I apology :) – avcajaraville Mar 19 '20 at 10:48
1

When I first got it, it was wrong but now it works @avcajaraville. – pedrez Mar 19 '20 at 11:30
@NarJovan for IE > 11 yep, no worries :) – avcajaraville Mar 19 '20 at 11:43

score 1 · Answer 2 · answered Mar 19 '20 at 10:39

You can use display flex to parent and align-self: flex-end; to child will solve your problem.

.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'>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>

score 0 · Answer 3 · answered Mar 19 '20 at 10:41

Minimal example with 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'>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>

How to place two divs on one bottom line?

3 Answers3