Почему стиль одного div влияет на другой?

Question

«Середина» и «правая» должны находиться под навигационной панелью, но когда я вертикально выравнивал свой «левый» текст, «середина» и «правая», вертикально выровненная вместе с ним.

Что мне нужно изменить, чтобы иметь только «верхний левый» и «нижний левый», вертикально выровненный внутри изображений, оставляя «середину» и «правый» по-прежнему в позиции по умолчанию чуть ниже навигационной панели?

/* Main Content Seperation */ 
 

 
div.contentContainer { 
 
    margin: 0 auto; 
 
} 
 
div.left, 
 
div.right { 
 
    width: 20%; 
 
    display: inline-block; 
 
} 
 
div.mid { 
 
    width: 50%; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
/* Left Content */ 
 

 
div.left { 
 
    height: 740px; 
 
    color: white; 
 
} 
 
div.upperLeft, 
 
div.lowerLeft { 
 
    border: 1px solid white; 
 
} 
 
div.upperLeft { 
 
    height: 366px; 
 
    background-image: url("mainimg_macbook.png"); 
 
    background-repeat: no-repeat; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
div.lowerLeft { 
 
    height: 366px; 
 
    background-image: url("mainimg_typing.png"); 
 
    background-repeat: no-repeat; 
 
}

<div class="contentContainer"> 
 
    <div class="left"> 
 
    <div class="upperLeft"> 
 
     <p class="left">Upper Left</p> 
 
    </div> 
 
    <div class="lowerLeft"> 
 
     <p class="left">Lower Left</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="mid"> 
 
    <p>Mid</p> 
 
    </div> 
 

 
    <div class="right"> 
 
    <p>Right</p> 
 
    </div> 
 
</div>

Answer 1

JSFiddle

Другой метод состоит просто плавать элементы влево.

CSS

/* Main Content Seperation */ 

div.contentContainer { 
    margin: 0 auto; 
} 
div.left, 
div.right { 
    width: 20%; 
    float: left; 
} 
div.mid { 
    width: 50%; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; // Floats Left 
} 
/* Left Content */ 

div.left { 
    height: 740px; 
    color: white; 
    clear:none; 
} 
div.upperLeft, 
div.lowerLeft { 
    border: 1px solid white; 
} 
div.upperLeft { 
    height: 366px; 
    background: purple; 
    background-repeat: no-repeat; 
    line-height: 366px;// Align Text to Center of Div 
    text-align: center; // Center Text 
} 
div.lowerLeft { 
    height: 366px; 
    background-color: red; 
    background-repeat: no-repeat; 
    vertical-align: middle; 
    text-align: center; // Center Text 
    line-height: 366px; // Align Text to Center of Div 
}