<div id="wrapper1" style="width:200px;float:left;margin-top:0px">
    <img src="./profilepic.jpg"  width="190px" height="220px"/>
</div>
<div id="wrapper2" style="width:400px;float:left">
    <h2>cool</h2>
</div>
<div id="wrapper3" style="width:300px;float:left">
    <h2>Thanks</h2>
</div>
  

Это мои три обертки. Я хочу, чтобы они перемещались одна за другой, но wrapper3 иногда они располагаются в нижней части wrapper2 , я хочу wrapper1 взять 200 пикселей wrapper2 , а после 400 пикселей и wrapper3 300 пикселей всего 900 пикселей.

Как я могу заставить их перемещаться одна за другой таким образом, чтобы они занимали 900 пикселей?

Заключите три divs в обертку div с шириной 900 пикселей и высотой 220 пикселей.

Прежде чем я отвечу

Позвольте мне просто рассказать вам несколько вещей о хороших практиках и тому подобном.

• Использование встроенного стиля (атрибута) считается плохой style= практикой. Вместо этого используйте таблицу стилей ( <style> теги), это позволяет группировать похожие элементы и сокращать код. Не говоря уже об отделении контента от презентации.
• атрибуты width= и height= <img> тегов не требуют (и фактически не проверяются) px в конце. Вы должны исправить width="190" height="220" .

Ответ

Вы хотите обернуть все 3 из них в контейнер, для которого установлено значение width: 900px; (или min-width: 900px; , если на то пошло).

Вот пример

HTML:

 <div id=parent>
    <div id=wrapper1>Lorem Ipsum</div>
    <div id=wrapper2>Lorem Ipsum</div>
    <div id=wrapper3>Lorem Ipsum</div>
</div>
  

CSS:

 #parent { /* Applies to parent div */
    min-width: 900px;
}
#parent div { /* Applies to all divs within the parent */
    height: 200px;
    float: left;
}

/* Specific div styling (width and background color) */
#wrapper1 {
    width: 200px;
    background: red;
}
#wrapper2 {
    width: 400px;
    background: green;
}
#wrapper3 {
    width: 300px;
    background: blue;
}