|
| |
| Use absolute position to the right to layout the menu bar section |
|
|
|
|
|
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
color: #000;
background-color: #ccc;
}
#content {
padding: 10px;
margin: 5px 122px 5px 5px;
background-color: #fff;
border: 1px solid #000;
}
#menu {
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 90px;
}
</style>
</head>
<body>
<div id="menu">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
</div>
<div id="content">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
|
|
|
| Related examples in the same category |
| 1. | Absolutely positioned Elements are positioned relative to the browser's viewport. | | | | 2. | Absolutely positioned element is positioned in context to the dimensions of the relatively positioned container. | | | | 3. | position:absolute positions an element from its location in the normal flow or from its nearest positioned ancestor. | | | | 4. | position: absolute and to the top 100px | | | | 5. | Use inline style to control the absolute position | | | | 6. | Absolute position to the bottom | | | | 7. | use absolute positiont to create a ladder layout | | | | 8. | position absolute, offset, top, right, bottom, left | | | | 9. | position absolute: offset right | | | | 10. | position absolute: offset no width, no height | | | | 11. | position absolute: offset bottom right | | | | 12. | position absolute: offset bottom left | | | | 13. | position absolute offset | | | | 14. | two block with position: absolute | | | | 15. | width, height: absolute positioning | | | | 16. | Absolute positioning of elements | | | | 17. | Absolute position is in a relative position | | | | 18. | Absolute Box | | | | 19. | An absolute element is removed from the normal flow and put in a layer above or below it. | | | | 20. | left, right, top, and bottom applied to absolute boxes. | | | | 21. | Vertically Stretched Absolute | | | | 22. | Remove an element from the normal flow and move it into its own layer with absolute position. | | | | 23. | absolute positioning | | | | 24. | absolute positioning for header panel | | | | 25. | absolute position offset: top right bottom left | | | | 26. | absolute position: offset right | | | | 27. | absolute position offset: no-width, no-height | | | | 28. | absolute position offset | | | | 29. | absolute position offset: bottom left | | | | 30. | absolute position offset: bottom right | | | | 31. | Shrinkwrapped Absolute right offset | | |
|