Контейнер с плавающей запятой уходит под плавающее изображение img ⇐ CSS

[Anonymous]

Пытаюсь сделать макет кирпичиком. Сначала это работало, но теперь оно просачивается. Я могу либо разместить изображение (и поле будет отображаться под ним), либо поле (и изображение будет отображаться под ним)
не в том месте
код:

Код: Выделить всё

* {
-moz-box-sizing: border-box;
-webkkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: white;
color: black;
font-family: verdana;
font-size: 14;
}

center {
text-align: center;
}

.containerinvis {
width: 1150px;
margin: auto;
margin-top: 40px;
margin-bottom: 20px;
position: relative;
}

.filenamebar {
background-color: #FFCDD9;
padding: 5px;
border:solid 2px #EAA2B3
}

.filename {
vertical-align: middle;
color: #341D22;
text-size: 12;
float:left;
}

.windowedclosed {
float:right;
width: 100px;
box-sizing: border-box;
text-align: right;
}

.clear:after {
clear: both;
content: "";
display: table;
}

.wrapper {
background-color: #FFE1E7;
padding: 20px;
padding-top: 0px;
border-style:solid;
border-width: 0px 2px 2px 2px;
border-color: #FFBFCE;
position:relative;
}

.inside-header {
text-align:center;
padding:20px;
}

.box1 {
background-color: white;
margin: 10px;
margin-bottom: 5px;
padding: 10px;
border-radius: 5px;
height:145px;
width:760px;
display: inline-block;
float: left;
}

.box2 {
background-color: white;
margin: 10px;
margin-top:5px;
margin-left:10px;
margin-right:5px;
padding: 10px;
border-radius: 5px;
height:145px;
width:375px;
display: inline-block;
float: left;
}

.img-float-left {
width: 300px;
height: 300px;
border-radius: 5px;
overflow: hidden;
float: left;
margin: 10px;
display: inline-block;
}

.img-float-right {
width: 375px;
height: 300px;
border-radius: 5px;
overflow: hidden;
float: left;
margin: 10px;
margin-top:5px;
display: inline-block;
}

.box-header1 {
text-color:#FF7192;
text-align:left;
}

.box-text1 {
text-color:#FF7192;
text-align:left;
margin-top: 5px;
}

.butt-container {
background-color: red;
width: 600px;
height: 150px;
display: inline-block;
float: left;
}

Код: Выделить всё

 hello-world!.mpreg



- ☐ X









 [future header] 

[img]https://i.pinimg.com/564x/9e/71/d2/9e71d22b450cc722dca87ac4c3729536.jpg[/img]




 [lil header] 

text



[img]https://i.pinimg.com/564x/9e/71/d2/9e71d22b450cc722dca87ac4c3729536.jpg[/img]

not in the right place

Я пытался поменять местами рамку и img, но теперь изображение находится не в том месте
не в том месте
пожалуйста, извините за mspaint, я не знаю, как еще это описать.

Подробнее здесь: https://stackoverflow.com/questions/786 ... loater-img