oneman oneman - 25 days ago 8
HTML Question

Why does styling of one div affect another?

"Mid" and "right" are supposed to still be just under the nav bar, but when I vertically aligned my "left" text, "mid" and "right" vertically aligned along with it.

What do I need to change to have only "upper left" and "lower left" vertically aligned inside the images, while leaving "mid" and "right" still at their default position just below the nav bar?

enter image description here



/* 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

JSFiddle

Another method is to just float the elements left.

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
}
Comments