Question: I have been long away from HTML and CSS, can't find the solution to this simple problem.

I have one div inside the other. Outer Black and inner orange.

[![enter image description here](https://i.stack.imgur.com/hsZkE.gif)](https://i.stack.imgur.com/hsZkE.gif)

My HTML and CSS is :

```css
#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  width: 100%;
  height: 100%;
  margin: 5px;
  background-color: orange;
}
```

```html
<div id="outer">
  <div id="inner">
  </div>
</div>
```

Why is my inner DIV spilling out of the outer ? How do I fix it without giving fixed dimensions?

Answer: 
You can set `#inner` in position absolute and instead of using margin, you can use this

```
#inner {
  position: absolute;
  top: 5px;
  bottom:5px;
  left:5px;
  right:5px;
  background-color: orange;
}

```

```css
body {
  width: 100%;
  height: 1000px;
}

#outer {
  position: fixed;
  width: 30%;
  height: 30%;
  background-color: black;
}
#inner {
  position: absolute;
  top: 5px;
  bottom:5px;
  left:5px;
  right:5px;
  background-color: orange;
}
```

```html
<body>
  <div id="outer">
    <div id="inner">
    </div>
  </div>
</body>
```
What helped me with the same problem is:

```
position: absolute;
left: 0;
top: 0;

```