BrianC987 BrianC987 -4 years ago 82
CSS Question

How to get three divs to display diagonally?

I will try to explain this as the best I can. I have two divs side-by-side. The right one has three paragraphs in it. The left one has an image, vertical text, and a second image. The first image should be in the top left corner, the vertical text should be centered horizontally and vertically, the second image should be in the bottom right corner.



body {
width: 8.5in;
}

.left-div {
float: left;
background: blue;
}

.right-div {
overflow: hidden;
background: red;
}

.left-img {
float: left;
}

.big-text {
background: orange;
font-size: 2em;
padding: 0 30px;
float: left;
vertical-align: middle;
}

.right-img {
float: left;
bottom: 0;
right: 0;
}

.bottom-div {
background: gray;
}

<div class="left-div">
<div class="left-img">
<img src="smiley.gif" width="150">
</div>
<div class="big-text">
<p>B<br>I<br>G</p>
</div>
<div class="right-img">
<img src="smiley.gif" height="200">
</div>
<div class="right-div">
<p>First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First
paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.
<p>Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph.
Second paragraph.
<p>Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third
paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph.
</div>
</div>
<div class="bottom-div">
<p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph
of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
</div>




Answer Source

You can wrap left and right divs into a container and use nested flexbox layout.

CodePen

body {
  width: 8.5in;
}

p {
  margin: 0;
  padding-bottom: 20px;
}

img {
  vertical-align: top;
}

.container {
  display: flex;
}

.left-div {
  background: blue;
  display: flex;
  align-items: center;
}

.right-div {
  background: red;
}

.left-img {
  align-self: flex-start;
}

.big-text {
  background: orange;
  font-size: 2em;
  padding: 0 30px;
}

.right-img {
  align-self: flex-end;
}

.bottom-div {
  background: gray;
}
<div class="container">
  <div class="left-div">
    <div class="left-img">
      <img src="//dummyimage.com/150x150" width="150">
    </div>
    <div class="big-text">
      <P>B<br>I<br>G</p>
    </div>
    <div class="right-img">
      <img src="//dummyimage.com/100x200" height="200">
    </div>
  </div>
  <div class="right-div">
    <p>First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First
      paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.</p>
    <p>Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph.
      Second paragraph.</p>
    <p>Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph.
      Third paragraph. Third paragraph. Third paragraph. Third paragraph. </p>
  </div>
</div>
<div class="bottom-div">
  <p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph
    of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download