div with position: absolute; inside div with position: relative; : div layout « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. div layout

div with position: absolute; inside div with position: relative;

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>positioning</title>
<style type='text/css'>
body {
    background: lightyellow;
    font: 12px sans-serif;
}
div#container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
}
div {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: absolute;
}
div#one {
    background: pink;
    top: 0;
    left: 0;
}
div#two {
    background: lightblue;
    top: 0;
    right: 0;
}
div#three {
    background: yellowgreen;
    bottom: 0;
    left: 0;
}
div#four {
    background: orange;
    bottom: 0;
    right: 0;
}
</style>


    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
            sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
            magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
            lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
            facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
            Vestibulum sed felis.
        </p>
        <div id='container'>
            <div id='one'></div>
            <div id='two'></div>
            <div id='three'></div>
            <div id='four'></div>
        </div>
    </body>
</html>








Related examples in the same category

1.div float: left;
2.div float: left; 2
3.Two floating right div section
4.Two floating left div sections
5.Div float: none;
6.Div float: left; 3
7.Div float: left; 4
8.Div float: left; 5
9.DIV float: left; 6
10.DIV float: right;
11.div float with width and height
12.div width: 50px;
13.DIV width: auto;
14.Div width: 100%;
15.Div width: 1001px;
16.Div width: 500px;
17.DIV width: 134px;
18.Using width to control nested div boxes
19.Set width and height to DIV
20.Shrinkwrapped DIV by setting both width and height to auto
21.div height: 50px;
22.Div line-height: 23px;
23.Div line-height: 17px;
24.DIV line-height: 1.3em;
25.DIV height:1.8em;
26.DIV line-height:1.8em;
27.Using div with different height to create layout
28.Div for clearing
29.Div clear: both;
30.DIV for clear
31.DIV clear: left;
32.Div position: relative;
33.DIV position: absolute;
34.Using position: fixed; to place div tags to four corners
35.Using position: absolute; to place div tags to four corner
36.div with position: absolute; inside body
37.div position:relative;
38.Set position of DIV to absolute, to bottom 50px, to left 100px
39.Wrap tags in DIV and set the position
40.Div left: 0;
41.Div display: inline;
42.div display: table-cell;
43.Div top: 0;