Ребенок не привык к родителям

Question

Я работаю над сайтом моего портфолио и испытываю затруднения в том, чтобы объединить свои divs.

Здесь это: у меня есть один div тела, внутри есть два дочерних div.

Кузов должен иметь max-height 100%, max-width: 100%, чтобы он не превышал окно браузера.

В левом div содержится изображение, которое я хочу масштабировать до родительского тела div (max-height 100%, max-width 70%).

Правый div содержит текст об изображении, его необходимо масштабировать до высоты левого div (есть также нижний колонтитул, расположенный в нижней части этого div).

Это не должно быть так сложно, его почти работая, но прямо сейчас мой контейнер изображения (левый div) не содержится в div тела.

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.Info { 
 
    float: left; 
 
    width: 25%; 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    /*margin-left: 78%;*/ 
 
    border-left: 1px black solid; 
 
    /*position: absolute;*/ 
 
} 
 
.InfoText p { 
 
    margin-top: -10px; 
 
} 
 
div img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    margin: 0 auto; 
 
    box-shadow: 5px 5px 15px #888888; 
 
} 
 
.ImageContainer { 
 
    float: left; 
 
    height: 100%; 
 
    max-width: 70%; 
 
    padding-right: 15px; 
 
    position: relative 
 
} 
 
section.ImageContainer img { 
 
    float: left; 
 
    object-fit: cover; 
 
} 
 
#SideQuote { 
 
    margin-top: 30px; 
 
} 
 
.StuffInBody { 
 
    position: relative; 
 
    padding-top: 15px; 
 
    float: left; 
 
    display: flex; 
 
} 
 
footer p { 
 
    position: absolute; 
 
    bottom: 0%; 
 
    margin: 0; 
 
}

<div class="StuffInBody"> 
 

 
    <div class="ImageContainer"> 
 
    <img class="contained" src="images/TheGMODebate copy.jpg" alt="" /> 
 
    </div> 
 

 
    <div class="Info"> 
 
    <div class="InfoText"> 
 
     <p>ILLUSTRATION</p> 
 
     <p>Title: <em>The GMO Debate</em> 
 
     </p> 
 
     <p>Media: Gouache</p> 
 
     <div id="SideQuote"> 
 
     <p class="ClickToEnlarge">Full screen image click<a href="images/TheGMODebate copy.jpg" target="_blank"> here.</a> 
 
     </p> 
 
     </div> 
 
     <footer> 
 
     <p>&copy; Brooke Weiland 2015</p> 
 
     </footer> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Это очень трудно сделать надежный интерфейс с помощью поплавков.

Он изменяет поведение по умолчанию и помещает элемент за пределы потока.

Вы должны быть способны делать то, что хотите, используя только flex.

Свойство box-sizing: border-box также делает чудеса (удобство управления и простыни).

Кроме того, свойство объектной привязки недостаточно поддерживается браузерами, которые будут использоваться в настоящее время IMHO. http://caniuse.com/#feat=object-fit