horizontally stretching content : CSS Basics « Style Basics « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Style Basics » CSS Basics 




horizontally stretching content
  

<!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>horizontally stretching content</title>
<style type='text/css'>
body {
    background: lightyellow;
    font: 12px sans-serif;
    margin: 0;
    padding: 0;
}
{
    background: yellowgreen;
    border: 1px solid green;
    padding: 5px;
    margin: 5px;
}
p#absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>


    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
        <p id='absolute'>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
    </body>
</html>

   
    
  














Related examples in the same category
1.Using Whitespace in CSS
2.Cascaded
3.css box model
4.HTML and CSS coding for inline-block elements
5.CSS Text Properties Example
6.Zero page gutter
7.Inline HTML elements include markup for explicit semantic purposes:
8.CSS can be used to control the presentation of an XHTML document
9.Box Model Demonstration
10.Width and height
11.Default Styles
12.stretching content
13.Box model properties are always specified in order clockwise.
14.vertically stretching content
15.Update text color when mouse hover
16.Whitespace and Chunking
17.Multiple Columns
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.