# Question about why container div isn't visible?

**URL:** <https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672>\
**Category:** Uncategorized\
**Created:** [December 18, 2016, 10:55pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672 "2016-12-18T22:55:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bert\_McLees](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bert_mclees/32/7895_2.png) [@Bert\_McLees](https://forum.kirupa.com/u/Bert_McLees)\
**Post date:** [December 18, 2016, 10:55pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/1 "2016-12-18T22:55:32Z")

</div>

Why isn’t the container div visible as the background?

```
<head>
  <title>Styling in React</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 
  <style>
    #container {
      padding: 40px;
      background-color: #111;
      border: solid blue 3px;
      width: 500px;
      height: 600px;
    }
  </style>
</head>
 
<body>
  <div id="container"></div>
 
<script type="text/babel">
 
  var Letter = React.createClass({
    render: function() {
	var letterStyle = {
        padding: 50,
        margin: 10,
        backgroundColor: this.props.bgcolor,
        color: "#333",
        display: "inline-block",
        fontFamily: "monospace",
        fontSize: "32",
        textAlign: "center"
      };
        return (
          <div style={letterStyle}>
            {this.props.children}
          </div>
        );
      }
  });
 
  var destination = document.querySelector("#container");
 
  ReactDOM.render(
    <div>
      <Letter bgcolor="#58B3FF">A</Letter>
	  <Letter bgcolor="#FF605F">E</Letter>
	  <Letter bgcolor="#FFD52E">I</Letter>
	  <Letter bgcolor="#49DD8E">O</Letter>
	  <Letter bgcolor="#AE99FF">U</Letter>
    </div>,
    destination
  );
   
</script>
</body>
 
</html>
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 19, 2016, 12:07am UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/3 "2016-12-19T00:07:06Z")

</div>

The **container** `div` appears when I try out your code. It shows up with the #111 background and a blue border. Are you seeing something different?

😄

---

<div class="post-metadata">

**Author:** ![Bert\_McLees](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bert_mclees/32/7895_2.png) [@Bert\_McLees](https://forum.kirupa.com/u/Bert_McLees)\
**Post date:** [December 19, 2016, 5:14pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/4 "2016-12-19T17:14:03Z")

</div>

Wow, this is weird. No, but what I do see varies significantly by browser: (btw, my env is MS Surface Book with Win10), and in no case do I see the background div. I’m just opening directly from a file on my hard drive. Ideas? Thanks!

Chrome:  
 ![](https://forum.kirupa.com/uploads/kirupa/original/2X/d/da623af6db9ab1ab7f8548713e2157e60fba332f.jpg)

Looks like I’ll have to upload Firefox and Edge separately.

---

<div class="post-metadata">

**Author:** ![Bert\_McLees](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bert_mclees/32/7895_2.png) [@Bert\_McLees](https://forum.kirupa.com/u/Bert_McLees)\
**Post date:** [December 19, 2016, 5:14pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/5 "2016-12-19T17:14:37Z")

</div>

Firefox:

![](https://forum.kirupa.com/uploads/kirupa/original/2X/9/9a1f8919413d0001684eb935a8833f7d175797fc.png)

---

<div class="post-metadata">

**Author:** ![Bert\_McLees](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bert_mclees/32/7895_2.png) [@Bert\_McLees](https://forum.kirupa.com/u/Bert_McLees)\
**Post date:** [December 19, 2016, 5:16pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/6 "2016-12-19T17:16:06Z")

</div>

Edge:  
 ![](https://forum.kirupa.com/uploads/kirupa/original/2X/c/ce7d4740931e036b752d0eae23c0b6fcf684992d.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 19, 2016, 5:47pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/7 "2016-12-19T17:47:57Z")

</div>

That is really strange! Below is what I see when I preview in Chrome on Windows 10.

![](https://forum.kirupa.com/uploads/kirupa/original/2X/1/14a86a09c0c56af7a4a494d72df232662e17ccef.PNG)

Here is a zip of the HTML file. Does this look like what you have?

[test.zip](https://forum.kirupa.com/uploads/kirupa/original/2X/f/ffa884ccccd201205eabd5abf5d179ffad8102d2.zip) (20.6 KB)

---

<div class="post-metadata">

**Author:** ![Bert\_McLees](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bert_mclees/32/7895_2.png) [@Bert\_McLees](https://forum.kirupa.com/u/Bert_McLees)\
**Post date:** [December 19, 2016, 6:10pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/8 "2016-12-19T18:10:01Z")

</div>

Actually please re-zip… the only thing in the zip is the image file. Thanks.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 19, 2016, 6:38pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/9 "2016-12-19T18:38:07Z")

</div>

works for me, mac ff/chrome/safari

[https://jsfiddle.net/9q6oc68j/](https://jsfiddle.net/9q6oc68j/)

---

<div class="post-metadata">

**Author:** ![Bert\_McLees](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bert_mclees/32/7895_2.png) [@Bert\_McLees](https://forum.kirupa.com/u/Bert_McLees)\
**Post date:** [December 19, 2016, 7:22pm UTC](https://forum.kirupa.com/t/question-about-why-container-div-isnt-visible/635672/10 "2016-12-19T19:22:21Z")

</div>

OK - dohhh… what happened was I copy/pasted from your lecture… and hidden gibberish characters got inserted during that process… ouch… learned that the hard way…  
anyway… i deleted the css, and manually retyped it… all is well… thanks.