[Solved] Acessing and positioning divs with css

by


With the best understanding of your question, I tried to give you an answer.

section {}

.main {
  float: left;
  position: absolute;
  width: 400px;
  height: 100%;
  margin: auto 13%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.section1 {
  width: 40%;
}

.section2 {
  width: 40%;
}

.section1,
.section2 {
  margin: 0px;
  padding: 0px;
  padding: 0px 5px;
  float: left;
  position: relative;
  height: 80%;
}

.section3 {
  padding: 0px;
  /*border: 1px solid #cccccc;*/
  float: left;
  position: relative;
  width: 83%;
  margin: 5px 5px;
  height: 20%;
}

.section1 .inner-1 {
  float: left;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
}

.section2 .inner-1 {
  float: left;
  width: 100%;
  min-height: 30%;
  border: 1px solid #000000;
}

.section2 .inner-2 {
  float: left;
  width: 100%;
  min-height: 30%;
  border: 1px solid #000000;
  margin: 10px 0px 0px 0px;
}

.section3 .inner-1 {
  width: 100%;
  float: left;
  border: 1px solid #000000;
  width: 100%;
  height: 50%;
}
<section class="main">
  <section class="section1">
    <div class="inner-1">

    </div>
  </section>
  <section class="section2">
    <div class="inner-1"></div>
    <div class="inner-2"></div>
  </section>
  <section class="section3">
    <div class="inner-1"></div>
  </section>
</section>

Hope it may helpful to you.

solved Acessing and positioning divs with css