Content Display within Div Area

Question

I'm trying to setup a frame-like area using div, so all the content and picture in the area won't display beyond the area. However, I've tried using different z-index or display but no luck.

http://jsfiddle.net/06xwge5j/

HTML

<div id="Parent">
  <div id="Child">
    test content
  </div>
</div>

CSS:

#Parent {
  width: 50px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
}

#Child {
  position: relative;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: black;
  z-index: -1;
}

*sidenote:* recommend to use lowercase CSS selector names only. — Raptor, Oct 08 '14 at 01:54
If you use capital letters, you'll introduce lots of confusion, as HTML are case sensitive: http://stackoverflow.com/a/12533957/188331 — Raptor, Oct 08 '14 at 02:11

rvighne · Accepted Answer · 2014-10-08T02:01:06.287

You need to utilize the CSS overflow property on the parent element. Add the following line to the #Parent rules:

overflow: hidden;

This will completely hide child elements that are outside the box. Most likely you want to use auto instead of hidden to show scrollbars only when the content exceeds the box. jsFiddle

Demo

#Parent {
    width: 50px;
    height: 50px;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}

#Child {
    position: relative;
    top: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: black;
}

<div id="Parent">
    <div id="Child">
        test content
    </div>
</div>

score 1 · Answer 2 · answered Oct 08 '14 at 01:56

1

http://jsfiddle.net/06xwge5j/1/

Take a look

overflow: hidden;

it hides all content of an element that go beyond its edges.

answered Oct 08 '14 at 01:56

Muhammad Umer

17,263
19
97
168

Content Display within Div Area

2 Answers2

Demo