тянущийся правый float:left уходит вниз

Question

Господа помогите решить задачу:

картинка слева фиксированная, справа блок с текстом тянется и не должен перескакивать вниз при уменьшении размера окна браузера

что я только не пробовал - все равно скачет вниз. Как выйти из ситуации?

jsfiddle

.parrent {
  overflow: auto;
  margin-top: 30px;
  width: 100%;
}

.acount-box-avatar {
  float: left;
  margin-right: 16px;
  box-sizing: border-box;
  display: block;
}

.acount-box-right {
  float: left;
  box-sizing: border-box;
  display: block;
}

<div class="parrent">

  <div class="acount-box-avatar" style="border:1px solid #000000;">
    <img src="https://www.hibiny.com/images/2020/users/avatar100.jpg" width="80" height="80">
  </div>

  <div class="acount-box-right" style="border:1px solid #000000;">
    Тектст текст тексте текст Тектст текст тексте текст Тектст текст тексте текст
  </div>
</div>

Answer 1

Если именно с float, то нужно задать ширину блокам, которая в сумме будет равна 100% (и с учетом отступов):

* {box-sizing: border-box;}

.parrent {
  overflow: auto;
  margin-top: 30px;
  width: 100%;
}

.acount-box-avatar {
  float: left;
  margin-right: 16px;
  
  width: calc(25%  - 16px);
}

.acount-box-avatar img {width: 100%; height: auto; }

.acount-box-right {
  float: left;
  width: 75%;
}

<div class="parrent">

  <div class="acount-box-avatar" style="border:1px solid #000000;">
    <img src="https://www.hibiny.com/images/2020/users/avatar100.jpg" width="80" height="80">
  </div>

  <div class="acount-box-right" style="border:1px solid #000000;">
    Тектст текст тексте текст Тектст текст тексте текст Тектст текст тексте текст
  </div>
</div>

Но лучше использовать flex:

* {box-sizing: border-box;}

.parrent {
  overflow: auto;
  margin-top: 30px;
  display: flex;
}

.acount-box-avatar {
  margin-right: 16px;
}

<div class="parrent">

  <div class="acount-box-avatar" style="border:1px solid #000000;">
    <img src="https://www.hibiny.com/images/2020/users/avatar100.jpg" width="80" height="80">
  </div>

  <div class="acount-box-right" style="border:1px solid #000000;">
    Тектст текст тексте текст Тектст текст тексте текст Тектст текст тексте текст
  </div>
</div>

Answer 2

Просто уберите display: block из втоорго блока. И float: left там не нужен. https://jsfiddle.net/h5e7tmqw/

.parrent {
  overflow: auto;
  margin-top: 30px;
  width: 100%;
}

.acount-box-avatar {
  float: left;
  margin-right: 16px;
  box-sizing: border-box;
  display: block;
}

.acount-box-right {
  box-sizing: border-box;
}

<div class="parrent">

  <div class="acount-box-avatar" style="border:1px solid #000000;">
    <img src="https://www.hibiny.com/images/2020/users/avatar100.jpg" width="80" height="80">
  </div>

  <div class="acount-box-right" style="border:1px solid #000000;">
    Тектст текст тексте текст Тектст текст тексте текст Тектст текст тексте текст
  </div>
</div>

Answer 3

Спасибо @HamSter , навел на мысль, помогло левому блоку задать width: 100px;

а правому width: calc(100% - 116px);

(пробовал так, но забыл про margin-right: 16)

Благодарю!

БЛОГ НА HUSL

тянущийся правый float:left уходит вниз

Ответы (3 шт):