Using negative margin for div dialog

     
<!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>Vertical and Horizontal Alignment</title>
<style type='text/css'>
body {
    background: lightyellow;
    font: 16px sans-serif;
}
div#dialogue {
    position: absolute;
    width: 200px;
    height: 100px;
    background: yellow;
    border: 1px solid gold;
    top: 50%;
    left: 50%;
    margin: -56px 0 0 -106px;
    padding: 5px;
}
p {
    margin: 0;
}
p.copy {
    margin: 10px;
    line-height: 2em;
    font-size: 12px;
}
</style>


    </head>
    <body>
        <p class='copy'>
            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 class='copy'>
            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='dialogue'>
            <p>
                The dialogue &lt;div&gt; element is aligned vertically and
                horizontally, no matter what the size of the browser
                window.
            </p>
        </div>
    </body>
</html>

1.	div padding: 3px;
2.	div padding: 10px;
3.	div padding-right: 1px;
4.	Div padding: 0;
5.	Div padding: 0 18px 0 8px;
6.	DIV padding: 5px;
7.	DIV padding: 5px 5px 5px;
8.	DIV padding:0;
9.	Set padding to 10px for DIV
10.	Set right padding to 1px
11.	div margin: 5px;
12.	div::before margin-right: 25px;
13.	div margin: 15px;
14.	div margin: 25px;
15.	div margin-right: 1px;
16.	This div stretches across the whole window and has a negative margin.
17.	Div margin: 0;
18.	Div margin: 60px 0 0 115px;
19.	Div margin-top: -1px;
20.	DIV margin: 10px 0px 0px 0px;
21.	DIV margin: 0 auto;
22.	DIV margin-top: 10px;
23.	DIV margin-bottom: 10px;
24.	DIV margin-left: 200px;
25.	DIV margin: 10px 0;
26.	Set margin to 25px for DIV
27.	Set right margin to 1px

Using negative margin for div dialog : div margin padding « Tags « HTML / CSS

Related examples in the same category