Html Question posted in
Some basic documentation can be found here.

Html – How to create smaller DIV containers inside a parent DIV?

Example of how CSS3 Selectors work

Learning HTML5 and CSS3 from course videos; The person who did the example in the image for CSS3 Selectors did not show what he used for ‘div{}’, which I would assume applies to all DIVs. I would like to know of certain properties that can achieve this result.

The selectors were given to me like this. In terms of ‘div{}’, I thought I could resize the inner DIVs with the ‘position’ and ‘margin’ properties.
Is it possible to adjust the size of the inner DIVs and align them in the center by just referencing ‘div’?

div {
  position: relative;
  top: 50%;
  width: 90%;
  height: 90%;
  margin: auto auto auto auto;
}

div.outer-outer {
  background-color: red;
}

div.outer-outer div.inner {
  background-color: blue;
}

div.outer,
div.inner-inner {
  background-color: yellow;
}

div#main-section {
  background-color: green;
}

div.footer-section {
  background-color: purple;
}
<div class="outer-outer">
  Outer Outer
  <div class="outer">
    Outer
    <div class="inner">
      Inner
      <div class="inner-inner">
        Inner Inner
      </div>
    </div>
  </div>
</div><br /><br />

<div id="main-section">
  Main Section
</div><br />

<div class="footer-section">
  Footer Section
</div>
Tags:

2

Answers


  1. 0

    A possible solution is to adjust the padding of the ‘div’ like this:

    div {
     position: relative;
     width: 99%;
     padding: 10px;
     margin: 10px auto;
}

    If you want to adjust the size, you would need to modify the percentage assigned to the width.

    Login or Signup to reply.
  2. 0

    I’ve commented on the changes that i did. If you give the parent element, or as i did a general selector div a padding you can adjust the position of the child element.

    padding has the same order for the units as margin has:

    top > right > bottom > left

    And to adjust the size of an specific div you can give its class the wanted width and height. If you use relative units it will adjust its size to the parent element depending on the viewport.

    div {
  /* position absolute is not needed and has no effect on it. */
  width: 90%;
  height: 90%;
  margin:  auto; /* One auto is enough if you want to give every side the same margin */
  padding: 1rem 1rem 2rem; /* One possibility to reposition the elements */
}

div.outer-outer {
  background-color: red;

}

div.outer-outer div.inner {
  background-color: blue;
  /* width and height are there for resizing the wanted element */
  width: 50%;
  height: 20%;
}

div.outer,
div.inner-inner {
  background-color: yellow;
}

div#main-section {
  background-color: green;
}

div.footer-section {
  background-color: purple;
}
    <div class="outer-outer">
  Outer Outer
  <div class="outer">
    Outer
    <div class="inner">
      Inner
      <div class="inner-inner">
        Inner Inner
      </div>
    </div>
  </div>
</div><br /><br />

<div id="main-section">
  Main Section
</div><br />

<div class="footer-section">
  Footer Section
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search