0

Hello there i want to add one more div on the right side of 3 divs i.e left, right and mid, i am new to CSS, also if you could then please also explain how to position complex div designing, or please share a link to resource which elaborates this concept easily Here is my complete source code..Here is the output

<html>
    <head>
        <title>Template</title>
        <style>
            body {
                background-color: black;
            }

            .top, .left, .right, .mid, .bottom {
                margin: 5px;
                background-color: plum;
                padding: 5px;
            }

            .left, .right, .mid {
                width: 30%;
            }
        </style>
    </head>

    <body>
        <div class="top">
            <p>Top</p>
        </div>

        <div class="left">
            <p>Left</p>
        </div>

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

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

        <div class="bottom">
            <p>Bottom</p>
        </div>
    </body>
</html>
Kundanani Kumar
  • 1
  • 3
    Possible duplicate of [How to align 3 divs (left/center/right) inside another div?](https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) – Patrick Barr May 26 '17 at 20:33

1 Answers1

0

You can create a flex row with 2 flex children and put the left/mid/right elements in the left flex child set to the flex-basis you want those to occupy, then set the other flex child to flex-grow: 1. I'm using the shorthand properties in this code.

body {
  background-color: black;
}

.top,
.left,
.right,
.mid,
.bottom,
.panel2 {
  margin: 5px;
  background-color: plum;
  padding: 5px;
}

.flex {
  display: flex;
}
.panel1 {
  flex: 0 0 30%;
}
.panel2 {
  flex: 1 0 0;
  background: blue;
}
<div class="top">
  <p>Top</p>
</div>

<div class="flex">
  <div class="panel panel1">
    <div class="left">
      <p>Left</p>
    </div>

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

    <div class="right">
      <p>Right</p>
    </div>
  </div>
  <div class="panel panel2">
    foo
  </div>
</div>

<div class="bottom">
  <p>Bottom</p>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • can you suggest me a good resource to master CSS and JavaScript ? – Kundanani Kumar May 27 '17 at 05:07
  • Hi @KundananiKumar did this answer solve the problem? If so, be sure to accept a solution. re: learning css and JS, not really. people seem to like https://www.codecademy.com/ but I learn by doing. Start contributing on stack overflow and trying to solve people's problems. – Michael Coker May 27 '17 at 14:18