Add border for different columns together

  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>

<style type="text/css">

  #leftcontent {
    position: absolute;
    left:1%;
    width:20%;
    top:50px;
    background:#eee;
  }

  #centerleftcontent {
    position: absolute;
    left:22%;
    width:28%;
    top:50px;
    background:#fff;
  }

  #centerrightcontent {
    position: absolute;
    left:51%;
    width:28%;
    top:50px;
    background:#ccc;
    }

  #rightcontent {
    position: absolute;
    left:80%;
    width:19%;
    top:50px;
    background:#ddd;
    }
  
  #rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent {
    border:1px solid #000;
    }
    
  p,h1,pre {
    margin:0px 10px 10px 10px;
    }
    

  
  
</style>
</head><body>
<div id="banner"><h1>4 columns, all fluid</div>
<div id="leftcontent">
  <h1>leftcontent</h1>
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. </p>
</div>

<div id="centerleftcontent">
  <h1>centerleftcontent</h1>
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. </p>
</div>

<div id="centerrightcontent">
  <h1>centerrightcontent</h1>
  <p>this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. </p>
</div>

<div id="rightcontent">
  <h1>rightcontent</h1>
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. </p>
</div>

</body>
</html>

Related examples in the same category

1.	'border' Example
2.	border width, border style shorthand four values
3.	border width, border style shorthand one value
4.	border width, border style shorthand, three values
5.	border width, border style shorthand two values
6.	border: thin solid rgb(0, 0, 0)
7.	border: 1em solid black
8.	border: medium solid black
9.	border: thin solid black
10.	border: 1px solid rgb(0, 0, 0);
11.	border: 1px solid crimson;
12.	border: 1px solid gold;
13.	border: 1px solid rgb(200, 200, 200);
14.	Style sheet for border properties
15.	border-color: red green purple blue; border-width: thin medium thick .25cm;
16.	border overwrite
17.	Use border-bottom to draw line
18.	Dashed border
19.	border: 1px dashed #8a795d;
20.	Using image for border
21.	Border page border
22.	border: 1px solid green;
23.	When no border-color is specified, the border color is the value of the color property.
24.	border-style: solid dashed double inset;
25.	Border with default color
26.	border sets the size, pattern, and color of the border surrounding the padding.
27.	border: thick solid black
28.	Border shortcut setting
29.	border shortcut property takes three space-delimited values that represent the border's width, style, and color.
30.	border: 40px double black; creates a black, 40-pixel, double-line border.
31.	Border with specific setting for four directions
32.	This paragraph has a 1 pixel thick, solid black border around it.
33.	Border direction
34.	Set border to '3px dotted #33333;'
35.	Body border: 50px #666 ridge
36.	Combined style
37.	border:none is the default.
38.	Border's width cannot be negative because they are inside the margin.
39.	Use nested border
40.	border property, can be used to specify border-width, border-style, and border-color for all four sides at once.
41.	Border cascade

Add border for different columns together : border « CSS « HTML / CSS

Related examples in the same category