Fixed Width CSS : width « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. width

Fixed Width CSS

  

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Fixed Width CSS</title>
    <style rel="stylesheet" type="text/css">
body {
  background-color: #efefef;
  font-family: arial, verdana, sans-serif;
}

div#page {
  width: 700px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
  padding: 20px;
  font-size: 12px;
}
</style>
  </head> 
  <body>
    <div id="page">

<h1>Sample Web Page</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, 
nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia 
feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, 
iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. 
Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer 
lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie 
at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra 
a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar 
vel, leo. Sed a velit. Proin erat. Donec sem. </p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, 
nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia 
feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, 
iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. 
Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer 
lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie 
at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra 
a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar 
vel, leo. Sed a velit. Proin erat. Donec sem. </p>

    </div>
  </body>
</html>








Related examples in the same category

1.'width' Example
2.width: 250px
3.width: 1in
4.width: 96px;
5.width: 12em;
6.width: 192px;
7.width: 100%;
8.When all four offset properties are specified on the same element both width and height are implied.
9.width: 150px
10.width and height
11.width and height absolute positioning
12.width and height: auto
13.width and height: auto for table
14.width and height percentage
15.width: 200px; height: 300px;
16.more content than width
17.floats and percentage width
18.Set width for td
19.This text is chopped off
20.Auto width on a block element.
21.Set the width for the full page
22.width sets the width of the element. width:auto is the default value.
23.Default width
24.width:auto is the default.
25.width sets the width of an element's inner box.
26.Set width to auto for an anchor with LI under UL in a DIV
27.static width and centered
28.Set the total width to 50%
29.width: auto
30.width, height: auto
31.width, height: percentage, and html body no margin
32.width setting with more content than width
33.A div with auto width expands horizontally filling the whole available area.
34.Margin and width
35.Use width:auto to stretch the width of a block to the sides of its parent.
36.Aligned and Offset Static Table
37.Left-aligned Shrinkwrapped Table
38.Centered Shrinkwrapped Table
39.This div stretches across the whole window
40.width more content than width
41.width and height with percentage and html body no margin
42.floats and percentage width 2
43.height sets the height of an element's inner box.
44.height:auto is the default
45.width, height: percentage
46.height: size an element by assigning pixels, ems, a percentage
47.Percentages are more flexible because they can scale to the viewport.
48.height:100% stretches an element to the height of its parent.
49.height sets the height of the element.
50.height: 150px
51.Height and overflow
52.width: auto and height: 200px
53.width: 100% and height: 100%
54.width: 200px and height: auto