Example of Wide Content Confined using overflow:hidden
Style sheet
.elementBox {
overflow: hidden;
width: 600px;
color: #000; background-color: #DDD;
}
.wideContent {
width: 670px;
padding: 5px;
margin: 10px;
color: #000; background-color: #CFF;
text-align: justify;
}
This is the rendered result.
Note that you cannot view the cropped content. It is completely inaccessible to the user.
The containing block is 600 pixels wide.
The total width of the "wideContent"
DIV is 700 pixels, which exceeds the width of the containing block.
This causes the content to spill out the side of the containing block.
...
Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.
Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum.
The containing block is 600 pixels wide.