Columns with margin

  


<?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>Layout Example</title>
<style type='text/css'>
body {
  margin:0px;
  background-color:#000000;
  font-family:arial, verdana, sans-serif;}

#frame {
  margin-left:auto;
  margin-right:auto;
  width:960px;
  background-color:#ffffff;
    background-image:url("images/960px_3column_background.gif");
  background-repeat:repeat-y;}

#page {
  margin:0px 10px 10px 10px;}

#header {
  background-color:#cccccc;
  padding:10px;
  height:120px;}

#navigation {
  background-color:#efefef;
  padding:10px;
  height:40px;}

#footer {
  background-color:#cccccc;
  padding:10px;
  height:40px;
  clear:both;
  border-top:20px solid #ffffff;}

.column1of3, .column2of3, .column3of3 {
  float:left;
  width:280px;
  background-color:#cccccc;
  padding:10px;
  margin-top:20px;}

.column1of3, .column2of3, .columns1and2of3 {margin-right:20px;}

.columns1and2of3, .columns2and3of3 {
  float:left;
  width:600px;
  background-color:#cccccc;
  padding:10px;
  margin-top:20px;}



</style>

  </head> 
  <body>
    <div id="frame">
      <div id="page">
        <div id="header">header</div>
        <div id="navigation">navigation</div>
        <div class="column1of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
        <div class="column2of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus ullamcorper eget dignissim erat viverra. </div>
        <div class="column3of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus ullamcorper eget dignissim erat viverra. Mauris viverra massa ac libero feugiat tempor. Cras scelerisque fermentum dui et feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
        <div id="footer">footer</div>
      </div>
  </div>
  </body>
</html>

Related examples in the same category

1.	'margin' Example
2.	Margin with two values
3.	Margin with three values
4.	Margin with four values
5.	margin: 2em
6.	li margin: 0 0 0.25em 0 and padding
7.	margin: auto
8.	margin for top right left bottom
9.	Margin collapse
10.	Margin in four directions
11.	right left margin
12.	parent child margin
13.	auto margin
14.	The margin shorthand property can accept from one to four values.
15.	When three values margin: the top is the first value, the right and left sides are the second value, and the bottom is the third value.
16.	When two values margin: the top and bottom are the first value, right and left sides are the second value.
17.	When one value is supplied to the margin shorthand property, all four sides are specified with that one value.
18.	If the auto keyword is supplied for the left or right margins, the element that margin is applied to is aligned horizontally.
19.	Margin collapsing happens when the top or bottom margin of one element comes into contact with the top or bottom margin of another element.
20.	Margin collapsing also happens between parent and child elements.
21.	margin auto.html
22.	margin left auto
23.	margin right auto
24.	margin collapse 3
25.	margin collapse for nested elements
26.	margin collapse for nested elements with default padding
27.	margin collapse for nested elements with padding
28.	fixed double margin
29.	Using a division element with margins
30.	Use of margin and padding for block elements
31.	Margin and padding for html
32.	img margin-top: -96px; margin-left: -138px;
33.	p line-height: 150%; margin-top: 10px; margin-left: 80px;
34.	Padding and margin for List
35.	Zero Page margin
36.	fieldset border: 1px dotted #61B5CF;margin-top: 1.4em;padding: 0.6em;
37.	A demonstration of the margin property
38.	Margin settings
39.	* { padding: 0; margin: 0; }
40.	Use Minus margin to hide
41.	A negative margin
42.	margin: 5px;
43.	Color, font and text properties are inherited. Other properties, such as border, margin, and padding, are not inherited.
44.	When all four margin values are provided, each is provided in order clockwise, beginning with the top property.
45.	top and bottom margin
46.	using margin to make offset
47.	When all four values are provided, each is provided in order clockwise, beginning with the top property.
48.	When three values are supplied, the top is the first, the right and left sides are the second, and the bottom is the third.
49.	When two values are supplied to the margin shorthand property, the top and bottom are the first, right and left sides are the second.
50.	margin sets the size of the margin surrounding the border.
51.	A margin negative value moves it away from center.
52.	margin: 1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).
53.	Set margin to 0
54.	Set margin to '0 0 0.5em 0'
55.	Define Margin with value and percent
56.	Body margin to 10%
57.	Body with margin: 5% 10% 0 10%
58.	LI margin: 0.33em 0.5em 0.5em 1.5em
59.	Add margin to offset block nearby
60.	Use margin to align block to left
61.	Use margin to align block to center
62.	Use margin to align block to right
63.	Margin between parent and children
64.	Use margin to offset child
65.	Margin between sibling
66.	margin collapse 2
67.	margin collapse with nested elements
68.	double-margin
69.	margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement.
70.	Margin Collapsing
71.	margin collapse nested elements padding
72.	margin collapse nested elements default padding
73.	margin collapse nested elements
74.	double margin fixed
75.	Margin collapsing with adjacent siblings.

Columns with margin : margin « CSS « HTML / CSS

Related examples in the same category