| 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 | | |
|