Floating Positioning : position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. position

Floating Positioning

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>Floating Positioning</title>
<style type='text/css'>
p {
  background-color:#FFFFFF; 
  border:2px solid #000000;
  padding:5px; 
  margin:5px;}


.pullQuote {
  float:right; 
  width:150px;}
</style>

</head>

<body>
<h1>Floating</h1>

  <p class="pullQuote">Here is the pullquote. It will be removed from normal flow and appear on the right of the page.</p>

  <p>This is where the story starts and it will appear at the top of the page under the heading. You can think of it as the first paragraph of an article or story. In this example, the pull quote gets moved across to the right of the page. There will be another paragraph underneath.</p>

  <p>Here is another paragraph. This one will be at the bottom of the page.</p>
</body>
</html>








Related examples in the same category

1.'position' Example
2.position: absolute; top: 0; left: 0;
3.position: absolute; top: 0; right: 0;
4.position: absolute; bottom: 0; left: 0;
5.position: absolute; bottom: 0; right: 0;
6.position-absolute
7.position-absolute: offset
8.position absolute offset: bottom left
9.position absolute offset: bottom right
10.position absolute offset: no width no height
11.position absolute offset: right
12.position absolute offset: top right bottom left
13.position fixed
14.position relative
15.position: relative, absolute
16.position: relative;
17.position: relative; top: 25px; left: 25px;
18.position: relative; top: 10px; left: 10px;
19.Relative Positioning
20.Absolute Positioning
21.Fixed Positioning
22.CSS Positioning
23.HTML to demonstrate CSS positioning
24.Absolute position from the bottom
25.position: relative; top: 100px; left: 20px;
26.background-position: 75px 150px;
27.Positioning Items
28.positioned in relation to containing element
29.CSS Positioning
30.CSS positioning
31.CSS positioning 2
32.Using absolute positioning to center a box onscreen
33.The list-style property: combine three separate properties, list-style-type, list-style-image, and list-style-position
34.Elements that are absolutely positioned are positioned, by default, relative to the browser's viewport.
35.This element is positioned to the bottom right of the relatively positioned element.
36.Elements in fixed position stay in place, even when a document is scrolled and are positioned relative to the browser's viewport.
37.position: absolute; and nested effect
38.Image positioned in relation to containing element
39.position:relative; top:20px; left:20px;