HTML Javascript CSS - div dis/appear causes borders to shift

user_4542117 0
Viewed 93

I am new to HTML, Javascript, and/or CSS and I am trying to get a list to appear in an 'outer' box when a checkbox is checked in an 'inner' box.

The code for the jsfiddle is at:

https://jsfiddle.net/z6prq7a8/1/

and from there, one can see the .inner CSS code as:

.inner {
    width:800px;
    height:800px;
    margin-left:auto;
    border:1px solid #000;
    position:relative;
}

I have created two boxes, one inner, and one outer, and when I click on the checkbox in the 'inner' box, I want a list to appear in the 'outer' box. I believe I have the code correct, but when the list appears, the 'inner' box shifts downwards. How would I go about fixing this so that when I click the checkbox, the 'inner' box does not shift, and everything remains in the same place as when one loads the page?

border css html javascript
1 Answers

The problem with your code is in your CSS for the inner box. Since you don't want it to move when other elements are added, you want to use:

position: absolute;

However, we still want it to remain positioned inside the box correctly, so we add this CSS:

margin-left: 200px;
top: 0px;

Overall, all you need to change is your .inner to:

.inner {
    width:800px;
    height:800px;
    margin-left:200px;
    border:1px solid #000;
    position:absolute;
    top: 0px;
}

The end result will look like this:

enter image description here

enter image description here

user_146451010
Related