CSS Background not working on Codepen

Question

I've been trying to put my code up on Codepen but for some reason, the #left div background just doesn't display. It however, works fine locally. I've tried using image urls, background colors and everything to fix it, but nothing has worked so far. Any help would be appreciated!

Only the #left div is supposed to have a background color. Following is the code and here's the codepen.

index.html

<link rel="stylesheet" href="style.css"/>
<script src="index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<body>
  <div id="left">
  <form id="formBox">
    <textarea id="input" placeholder="Enter your LispyHTML"></textarea>
    <input id="renderButton" type="button" onclick="render()" value="Render!">
  </form>
</div>
    <div id="right">
  <div id="target">
  </div>
    </div>
</body>

style.css:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body {
  margin: 0;
  padding: 0;
  border: 0px;
}

body{
    font-family: 'Open Sans';
}

#left{
    width: 50%;
    height: 100%;
    float: left;
  background: #000000 !important;
    /*background: linear-gradient(to right, #c2e59c, #64b3f4);       */
}

#right{
    width: 50%;
    height: 100%;
    float: right;
}

#formBox{
    position: absolute;
    width:40vw;
    height:240px;
    background-color: #fff;
    margin:auto;
    border-radius: 5px;
    padding:10px;
    left:20%;
    top:50%;
    margin-left:-17%;
    margin-top:-200px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
#target{
    height: 100%;
    float: left;
}

#input{
    height: 100%;
    width: 100%;
    left: 500px;
    margin: auto;
    border-style: none; 
    border-color: Transparent; 
    overflow: auto; 
    resize: none;
    outline: none;
    display:inline-block

}

#renderButton {
    position: absolute;
    top: 280px;
    left: 37%;
    background-color:#9C27B0;
    border-radius:10px;
    border:1px solid #9C27B0;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    font-size:17px;
    padding:10px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    outline: none;
}
#renderButton:hover {
    background-color:#7B1FA2;
    border: none;
}

Your background rule for the specified element #left is applying, you can verify this by inspecting the element in question. When doing so, you may also notice that this element has no calculated height, you have used a percentage unit value which is supposed to be relative to a more explicitly defined length unit value (with absolute values defined in, for example, px) - of which there is none. Defining any absolute height value, on #left, using a length unit will demonstrate this. — UncaughtTypeError
– UncaughtTypeError, Commented Dec 7, 2017 at 9:32

Hiren Vaghasiya · Accepted Answer · 2017-12-07 09:25:55Z

1

You need to change height 100% to 100vh

#left{
    width: 50%;
    height: 100vh;
    float: left;
    background: #000000 !important;
    /*background: linear-gradient(to right, #c2e59c, #64b3f4);       */
}

or

#formBox change position:relative and margin-top:0px

answered Dec 7, 2017 at 9:25

Hiren Vaghasiya

5,5341 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Background not working on Codepen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related