csstdg5figs/10-floating-and-positioning/width-height-partially-outside.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Positioning an element partially outside its containing block</title>
<style type="text/css">
div {color: rgba(0,0,0,0.5); font: bold italic x-large sans-serif; text-align: right;}
#contain {position: relative; background: rgba(0,128,216,0.33);
  height: 300px; width: 500px;}
#example {position: absolute; background: rgba(216,128,0,0.67);
  top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%;
  padding: 2em;
}
</style>
</head>
<body>

<div id="contain">
containing<br>block
<div id="example">positioned element</div>
</div>

</body>
</html>