Simple code not working

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.

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.

If you have a Codepen, then it would be easier to just supply us a link it.


sorry didn’t realize it was an option hahah

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

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?

No upvote, but you can click the heart to like a reply. Also, you can mark reply as solved if it takes care of your issue.

PS - You could also accomplish the same with:

<div id="unoDiv">ASDS</div>
<div id="dosDiv">ASDS</div>