Happy Codings - Programming Code Examples
Html Css Web Design Sample Codes CPlusPlus Programming Sample Codes JavaScript Programming Sample Codes C Programming Sample Codes CSharp Programming Sample Codes Java Programming Sample Codes Php Programming Sample Codes Visual Basic Programming Sample Codes


HTML & CSS Web Design

Html Css > Code Examples

Four column layout

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
Four column layout <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Four Column Layout</title> <style type="text/css"> #columnLeft { position: absolute; left:1%; width:20%; top: 3em; background:pink; } #columnInnerLeft { position: absolute; left: 22%; width: 28%; top: 3em; background: red; text-align: justify; border-width: 0; } #columnInnerRight { position: absolute; left: 51%; width: 28%; top: 3em; background: orange; } #columnRight { position: absolute; left: 80%; width: 12%; top: 3em; background: blue; } </style> </head> <body> <div id="header"> <h1>Love Sayings</h1> </div> <div id="columnLeft"> <h2>Left Column</h2> <p>Footfalls echo in the memory<br> Down the passage which we did not take<br> Towards the door we never opened<br> Into the rose-garden.<br> My words echo Thus, in your mind. ("Four Quartets")<br><br> T.S. Eliot </p><br> </div> <div id="columnInnerLeft"> <h2>Inner Left Column</h2> Love is the immortal flow of energy that nourishes,<br> extends and preserves. Its eternal goal is life.<br><br> Smiley Blanton<br> </div> <div id="columnInnerRight"> <h2>Inner Right Column</h2> <p>And think not you can direct the course of love, for love,<br> if it finds you worthy, directs your course.<br><br> Kahlil Gibran</p><br> </div> <div id="columnRight"> <h2>Right Column</h2> <p>Think about it, there must be higher love<br> Down in the heart or hidden in the stars above<br> Without it, life is a wasted time<br> Look inside your heart, I'll look inside mine.<br><br> Steve Winwood</p><br> </div> </body> </html>