Using position: fixed; to place div tags to four corners : div layout « Tags « HTML / CSS






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

Using position: fixed; to place div tags to four corners

      
<!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;
}
p {
    line-height: 2em;
    margin: 10px 110px;
}
div {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    position: fixed;
}
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. Donec eu
            massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at,
            lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc
            et purus vitae tortor sodales auctor. Nulla molestie. Pellentesque
            ante mauris, tristique ac, placerat sit amet, placerat nec, ante.
            Vestibulum interdum. Donec vitae tellus. Aliquam erat volutpat.
            Aenean dictum dolor ut sem.
        </p>
        <p>
            Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
            nulla pharetra dignissim. Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit. Aliquam cursus tortor eget diam. Pellentesque
            pellentesque turpis sed erat. Duis non libero vel metus
            sollicitudin aliquet. Aenean neque. Nunc eget quam a mauris
            vulputate laoreet. Mauris dictum, eros venenatis fringilla
            vehicula, tortor augue dignissim ante, id imperdiet risus sapien
            at odio. Praesent ligula magna, nonummy vitae, facilisis at,
            fermentum non, diam. Integer sit amet ligula quis lectus bibendum
            porta. Aliquam neque ipsum, aliquet et, semper vel, blandit ac,
            massa. Etiam porttitor justo id arcu. Ut ante lacus, rutrum id,
            vehicula non, faucibus in, lorem. Integer eu ante ut mauris
            rhoncus molestie. Aenean ut est et lectus tempor pharetra. Fusce
            sed nibh. Class aptent taciti sociosqu ad litora torquent per
            conubia nostra, per inceptos hymenaeos.
        </p>
        <div id='one'></div>
        <div id='two'></div>
        <div id='three'></div>
        <div id='four'></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: absolute; to place div tags to four corner
35.div with position: absolute; inside div with position: relative;
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;