Simple code not working

1

I’m working on a project on codepen and can’t get my divs to flow how i believe they should. So in order to make sure my understanding is correct i opened a new code and tested the concept. The objective of this code is simple. I will make a block of red with a height of 100 px. then a block of blue with 100px.
I attempted to complete this by creating a div with a height of 100 and background color red. then i created a second div with a height of 100 and color blue. here’s the html. and below will be the css.

2

The output only shows the first div to be the size of the row where “asds” is output. I would expect the 2nd div to begin below the first one because they are not nested together. So I’m clearly misunderstanding something. . .

I also understand that i could add something like “magin-top:200px” in the css for dosDiv but i’m more looking for an understanding as to why this isn’t working as is so i could apply that understanding to my actualy project.

4


sorry didn’t realize it was an option hahah

5

I do not see ASDS text anywhere in your current code. Also, you do have them nested together.

See below where I have added comments concerning nesting.

<div id="unoDiv"> <!-- start of unoDiv div -->
  <div class="row">
    <div class="col-xs-12">
    </div>
  </div>
  <div id="dosDiv"> <!-- dosDiv is nested inside unoDiv here -->
    <div class="row">
      <div class="col-xs-12">
      </div>
    </div>
  <!-- you are missing a closing div for dosDiv -here->
<!-- you are missing a closing div for unoDiv here -->

If you want two separate divs, then you would write:

<div id="unoDiv"> <!-- start of unoDiv div -->
  <div class="row">
    <div class="col-xs-12">
    </div>
  </div>
</div> <!-- end of unoDiv div -->
<div id="dosDiv">  <!-- start of dosDiv -->
  <div class="row">
    <div class="col-xs-12">
    </div>
  </div>
</div>  <!-- end of dosDiv div -->

This is why it is so important to indent your code to show the various nested elements. Codepen has a Tidy feature on the dropdown of each module (HTML, CSS, JS) which will attempt to make these indentations for you.

1 Like
6

Surprised I missed something so simple; Thanks for your fast response it is very appreciated. Also, thanks for the tip on the “Tidy” feature. any upvote feature on this forum?