Nested div box : div « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. div

Nested div box

      
<!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>box model</title>
<style type='text/css'>
body {
    margin: 0;
    padding: 0;
}
div#box-wrapper {
    background: #ff0;
    border: 1px solid #fff;
}
div#box {
    border: 20px solid #f6c;
    margin: 20px;
    padding: 20px;
    background: #f90;
}
div#box-inner {
    background: #fff;
    color: rgb(244, 244, 244);
}
</style>


    </head>
    <body>
        <div id='box-wrapper'>
            <div id='box'>
                <div id='box-inner'>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing
                    elit. Proin consectetuer neque ac eros. Vivamus vel
                    nibh. Vestibulum aliquam neque a nisi. Nullam eu
                    turpis. Proin mi. Cras dictum semper felis. Maecenas
                    porttitor neque at dolor. Integer vel libero vitae
                    ante lobortis tristique. Morbi sapien diam, tristique
                    sed, placerat pharetra, luctus eget, neque.
                    Pellentesque leo mauris, sollicitudin a, malesuada
                    vitae, varius vitae, quam. Cras eget tellus vel nunc
                    dapibus pharetra.

                    Phasellus varius tincidunt quam. Maecenas viverra
                    mattis orci. Etiam porttitor luctus ligula. Ut ac
                    nibh. In commodo imperdiet sapien. Nulla vel sapien
                    sed mauris euismod pharetra. Quisque eu ante eget
                    pede tristique tincidunt. Curabitur eu erat eu libero
                    aliquam placerat. Pellentesque felis erat, cursus
                </div>
            </div>
        </div>
    </body>
</html>








Related examples in the same category

1.'div' Example
2.DIV color: white;
3.div::before content: "I said, \"Hello, world!\"";
4.div::before color: white;
5.div with id selector
6.Using div as img tag
7.This div stretches across the whole window.
8.div content: "This string is placed inside of all div elements.";
9.Using div to layout table elements
10.Div element
11.Div color: #676767;
12.Div based multi-column
13.Div color: red;
14.Div color: #FEF9ED;
15.DIV overflow: hidden;
16.DIV as container
17.Using two Nested DIV to do the layout
18.DIV color: #9D9C6A;
19.DIV color: #505050;
20.Default layout for div tags
21.The dialogue div element is aligned vertically and horizontally, no matter what the size of the browser window.
22.div for header and body
23.Grouping Elements Using the div Element
24.Two boxes with div tags
25.HTML divisions
26.Division tag
27.div with id style
28.div with class name
29.div.className (tag.className)
30.div in a div with class name
31.Use DIV as wrapper
32.Click to show or hide DIV section
33.Click to show and hide DIV content (IE only)
34.Block divider
35.'nowrap' is similar to the 'pre' element