• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 6. CSS Units > Percentage Units

6.2. Percentage Units

In addition to using units of measure in your CSS code, you can also use percentage units to set the width and height of various elements displayed on screen. The behavior is really no different than when using percentage values in standard HTML code, such as using <table width="50%"> in order to set table to half the width of the browser window. Similarly, percentage values in CSS are always relative to another value, typically the height or width of the browser window. Percentages are always specified using a numeral followed by a percentage sign, in exactly the same way as with a standard HTML tag.

Listing 6.2. Percentages

<html>
<head>
<title>Percentages</title>
<style>
p.margin-left {margin-left: 25%}
p.margin-right {margin-right: 25%}
p.halfway-left {margin-left: 50%}
p.halfway-right {margin-right: 50%}

body {font-size: x-large; font-weight: bold}
</style>
</head>
<body>

<p class="margin-left">
This text is indented 25% of the browser window to the
<em>left</em>. Here's some extra text to make this more
apparent.
</p>

<p class="margin-right">
This text is indented 25% of the browser window to the 
<em>right</em>. Here's some extra text to make this more
apparent.
</p>

<p class="halfway-left">
This text is indented to half of the browser window, and is 
indented 50% from the <em>left</em> of the browser window.
</p>

<p class="halfway-right">
This text is indented to half of the browser window, and is 
indented 50% from the <em>right</em> of the browser window.
</p>

</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint