CODEWITHSUNDEEP
htmlcss
BrianC987
BrianC987

Reputation: 181

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>

Upvotes: 1

Views: 2239

Answers (3)

Kanish
Kanish

Reputation: 321

Place divs in diagonal position using GRID.

.parent {
  width: 300px;
  height: 300px;
  background-color: green;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.child {
  background-color: greenyellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}
.div2 {
  grid-area: 2 / 2 / 3 / 3;
}
.div3 {
  grid-area: 3 / 3 / 4 / 4;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Diagonal Divs in Grid</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h3>Diagonal Divs in Grid</h3>
      <div class="parent">
        <div class="child div1">1</div>
        <div class="child div2">2</div>
        <div class="child div3">3</div>
      </div>
    </main>
  </body>
</html>

Upvotes: 0

Stickers
Stickers

Reputation: 78736

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>

Upvotes: 2

Hassan Zia
Hassan Zia

Reputation: 330

Do you want something like this?

.container{
  margin: auto;
  outline: 2px solid green;
  width: 70%;
  height: 300px;
 }
span{
  float:right;
  font-size: 28px;
}
.div1, .div2, .div3{
  text-align:center;
  vertical-align: middle;
  line-height: 100px;
  width: 33.33%;
  height: 100px;
  color: white;
}
.div1{
  background-color: blue;
}
.div2{
  margin-left: 33.2%;
  background-color: grey;
}
.div3{
  margin-left: 66.5%;;
  background-color: red;
}
<div class="container"><span>I'm main DIV</span>
  <div class ="div1">hi, i'm first div </div>
  <div class ="div2">hi, i'm second div </div>
  <div class ="div3"> hi, i'm third div</div>
</div>

Upvotes: 2

Related Questions