- 588
- Posts
- 18
- Years
- Seen Apr 13, 2007
HTML:
<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
background-image: https://img92.imageshack.us/img92/1931/bannerkb2.gif;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>
<body>
<div id="header">
Duis aliquam, pede vel egestas rhoncus, pede purus blandit nibh, et posuere dui velit sed.
</div>
<div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vulputate enim volutpat quam. Nullam vulputate commodo dolor. Integer consectetuer eros eget lacus. Fusce a urna pharetra sem vehicula tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tellus velit, euismod ac, nonummy vel, porttitor sit amet, mauris. Pellentesque posuere. Vivamus augue neque, lacinia id, suscipit et, placerat vitae, tortor. Sed ac risus. Maecenas eget pede ac elit rhoncus nonummy. Ut ac libero ac eros volutpat eleifend. Cras at velit a dolor bibendum fermentum. Aliquam congue tincidunt erat. Quisque volutpat, enim porta bibendum hendrerit, urna mi eleifend nibh, eu sagittis neque ipsum at tortor. Donec ligula est, feugiat eget, eleifend ac, convallis in, sem. Mauris posuere nisi vitae nunc semper vestibulum. Sed ut quam a justo malesuada luctus. Aenean blandit tortor porta lacus. Suspendisse elementum sapien auctor justo.
Aliquam erat volutpat. Vestibulum at purus a pede tempor aliquet. Morbi purus. Mauris id erat non nulla laoreet scelerisque. Aliquam ut leo. Curabitur ac metus accumsan ipsum tincidunt vulputate. Nulla sem. Aliquam erat volutpat. Praesent consequat dapibus eros. Proin commodo mauris et pede. Cras urna tortor, convallis non, egestas a, aliquet vel, augue. Etiam erat justo, dictum blandit, sollicitudin at, egestas eget, lorem. Ut imperdiet. Quisque lacinia eleifend libero. Nunc ornare turpis a felis. Vivamus et lacus. In velit dolor, laoreet a, convallis sit amet, interdum sit amet, nibh.
Suspendisse potenti. Aenean tincidunt tortor nec sapien. Morbi consequat lacinia magna. Aliquam erat volutpat. Aliquam orci sem, facilisis et, convallis sed, tempor sed, ligula. Curabitur urna. Pellentesque quis augue. Vestibulum a metus faucibus sapien tristique facilisis. Vestibulum ac purus ac urna ornare vehicula. Curabitur sed turpis. Curabitur tincidunt lorem ut leo. Nulla dui. Donec nulla elit, ullamcorper sed, interdum vel, pulvinar ac, risus. Integer ut nisi in urna convallis consequat. Morbi at nisi. Nam imperdiet. Mauris vel urna at magna accumsan congue.
Etiam non lacus. Mauris massa mi, dapibus vitae, aliquet et, sagittis at, ipsum. Donec metus. Aliquam erat volutpat. Morbi vel lorem a mi eleifend egestas. Fusce euismod eleifend purus. Nam non massa in tellus eleifend consectetuer. Cras a massa sit amet arcu interdum porta. Nam dignissim consequat nibh. Aliquam rutrum massa eu quam. Integer luctus dui non mauris. Quisque sit amet velit. Praesent viverra. Aliquam a nisi ac felis aliquam aliquet. Fusce tempus accumsan augue. Etiam hendrerit, neque sed euismod viverra, leo sapien vestibulum neque, euismod lacinia lorem eros ac eros. Proin blandit.
Aenean sodales ligula et libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris luctus dapibus diam. Praesent vel dolor ornare leo dapibus feugiat. Donec et enim et eros rutrum commodo. Phasellus et eros vitae felis gravida feugiat. Nunc vestibulum neque ac pede. Nam nulla quam, condimentum ac, ornare id, hendrerit nec, mauris. Nam gravida, nulla a mattis tincidunt, nisi erat facilisis est, sed lobortis pede turpis sed nunc. Ut commodo, magna nec pellentesque fringilla, nisi sapien facilisis eros, ac lacinia dui nisi vitae nisl. Proin eget diam. Proin et risus. Integer nunc. Pellentesque sed dolor at velit sollicitudin rutrum. Praesent accumsan nulla non felis. In viverra augue eu justo. Mauris nec dui. Nullam non nisl eget nunc laoreet hendrerit. Donec mollis.
</div>
<div id="center">
Suspendisse potenti. Donec risus sapien, scelerisque et, commodo sit amet, auctor id, dui. Sed id ipsum. Mauris et mauris. Etiam ornare risus non lectus. Vestibulum laoreet. Sed commodo velit non elit. Nunc nisi. Phasellus sit amet libero sed mi pellentesque fermentum. Donec ornare enim quis nisl. Donec elit ligula, fermentum non, varius a, commodo rhoncus, tellus. Pellentesque tortor.
Aenean dolor est, dapibus eu, accumsan in, tristique in, mi. Pellentesque feugiat ultrices augue. Vivamus in odio. Maecenas semper faucibus urna. Donec vulputate quam id nulla. Morbi justo ligula, mollis eu, lacinia sed, molestie quis, nunc. Nam ac nisl eu dolor interdum gravida. Praesent bibendum, magna eu ornare lobortis, erat metus tincidunt lectus, ac mattis augue tortor ut pede. Donec non neque. Praesent nec mi ac dolor consectetuer vehicula. Proin vitae nisi ullamcorper sem pellentesque tincidunt. Curabitur sem justo, elementum ac, lacinia sit amet, imperdiet quis, elit.
Morbi odio ipsum, scelerisque sed, congue sit amet, lobortis suscipit, nunc. Fusce adipiscing sagittis ipsum. Nullam in orci. Nullam et nisl. Fusce auctor dolor id pede. Mauris gravida ultrices pede. Donec adipiscing elementum metus. Quisque ultricies purus. Proin dapibus commodo quam. Phasellus rutrum consectetuer nisi. Vivamus non risus in lacus vehicula lobortis.
Proin orci. Nulla non nunc. Nunc bibendum ligula ut diam. Morbi placerat turpis sit amet lectus. Sed vulputate magna ut nunc. Cras sed dui in lectus feugiat tincidunt. Sed est metus, egestas quis, porttitor et, sollicitudin at, magna. Fusce pretium ullamcorper leo. Curabitur in nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a nibh. Fusce tortor justo, vehicula quis, rutrum a, luctus vel, ante. Praesent nec diam vitae nisi hendrerit pharetra. Donec ullamcorper sollicitudin dui. Aliquam egestas, libero sed porttitor rutrum, odio quam imperdiet lorem, eget viverra leo elit quis libero. Nullam cursus hendrerit metus. Quisque faucibus, nisl vitae vehicula dapibus, est mauris rhoncus est, eu ultrices diam sapien vitae ante. Donec ligula. Vestibulum consequat nisl.
Sed rhoncus dictum mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean ultricies tempus lacus. Integer porta. Phasellus ligula massa, vulputate sit amet, dignissim eu, rhoncus ac, tortor. Nunc vitae est. Curabitur sit amet tortor. Etiam sapien. Maecenas purus arcu, lobortis sit amet, eleifend ac, tempus tempus, ipsum. Vivamus commodo. Etiam mollis lectus sit amet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eros arcu, blandit vel, convallis id, molestie eu, lectus. In volutpat ligula.
Ut et urna eu eros blandit faucibus. Maecenas eget ante eget elit condimentum ultricies. Praesent mollis placerat augue. Integer elementum odio ut turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam mollis, nibh commodo suscipit feugiat, purus lectus lacinia sem, vel vulputate lectus augue nec quam. Quisque fringilla lorem non elit. Pellentesque sit amet ante vitae massa aliquam euismod. Aliquam mattis arcu sit amet ante. Etiam blandit. Nulla dapibus orci quis tortor. Nam a neque. Mauris sit amet nisi a leo ullamcorper suscipit. Suspendisse volutpat pulvinar purus. Fusce porttitor.
Proin eu lacus a leo adipiscing mollis. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean fringilla nisl id turpis. Pellentesque aliquam commodo odio. Phasellus at leo a risus viverra mattis. Curabitur ac neque molestie diam porttitor tempus. Nulla vitae purus at lacus laoreet pretium. In at felis in ante blandit scelerisque. Vivamus posuere, nisi sed facilisis fermentum, ligula lacus dapibus velit, vitae mollis tortor felis non odio. Curabitur sed urna. Donec mollis, mi at mattis accumsan, leo leo adipiscing nibh, non suscipit orci risus in enim. Fusce iaculis tellus vel sem.
Donec iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed aliquam facilisis purus. Sed molestie sapien ut erat. Phasellus in ipsum. Nullam sem risus, dapibus ac, dignissim id, facilisis nec, velit. Donec et erat. Vestibulum vel tortor sed erat aliquet dapibus. Mauris vehicula vestibulum purus. Praesent metus eros, vestibulum at, euismod vitae, placerat vitae, nisl. Quisque mollis, diam non scelerisque pharetra, orci sem tincidunt lorem, in aliquet arcu ipsum quis nisl. Vivamus quis est. Donec tempus sodales lorem. Cras commodo hendrerit massa. Donec scelerisque ligula vitae risus luctus imperdiet. In id erat sed urna consequat hendrerit. Integer rhoncus, velit non auctor interdum, ipsum enim tincidunt dolor, quis tempus orci risus sit amet nisi. Aenean at elit sit amet lacus lacinia hendrerit. Donec lectus nisi, feugiat vitae, volutpat in, commodo eget, velit.
Donec nisl ipsum, iaculis vulputate, gravida eget, porttitor in, mauris. Etiam viverra, felis ut sagittis blandit, dui tortor porta odio, vitae pellentesque ipsum lectus nec elit. Fusce nec elit facilisis erat consectetuer laoreet. Nam vestibulum ante fermentum sapien placerat vehicula. Aenean risus nibh, convallis ac, tincidunt ut, egestas pulvinar, metus. Maecenas urna. Pellentesque ut ligula. Sed nisi nibh, facilisis sed, viverra hendrerit, sagittis ut, massa. Sed convallis tempor mauris. Quisque pharetra. Duis tempus ligula facilisis nisi. Nulla eget quam. Integer sapien turpis, aliquet et, gravida in, egestas id, diam. Suspendisse potenti. Nullam interdum est ut urna pharetra gravida. Cras libero lacus, aliquet quis, ultrices nec, feugiat nec, massa.
Quisque quis enim. Sed lobortis risus id magna. In mauris. Aenean dictum enim sit amet dolor. Ut blandit. Phasellus pharetra, libero sed lacinia convallis, massa turpis vehicula erat, ut egestas nunc lorem at massa. Nunc lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pretium, neque nec porta consequat, turpis dolor pellentesque justo, eu feugiat lacus enim vel lorem. Morbi in nunc sit amet eros pharetra tristique. Morbi nunc nibh, lacinia lobortis, vestibulum nec, molestie quis, nisi. Fusce et ipsum sed metus bibendum malesuada. Etiam nunc. Nam gravida lobortis augue. Nunc lobortis adipiscing lacus. Nulla in dui. Nunc feugiat sagittis neque. Aenean bibendum risus tempor dui. Phasellus dapibus, purus ac varius sollicitudin, nisi neque pellentesque felis, dignissim molestie augue elit non pede.
Morbi ligula magna, aliquam a, commodo blandit, malesuada sit amet, orci. Praesent at risus. Donec cursus diam vel augue. Ut sapien diam, semper sed, feugiat vel, molestie nec, lacus. Aenean ullamcorper. Integer ante risus, scelerisque a, commodo non, mattis sit amet, turpis. Nullam non nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut lacus tellus, tempus vitae, volutpat ac, cursus nec, tortor. Integer varius luctus risus. Maecenas quis ante. In eleifend eleifend justo. Proin facilisis posuere magna. Ut ullamcorper dolor. Phasellus tortor. Nunc tincidunt arcu a arcu.
Phasellus vulputate nonummy purus. Aenean ultrices ante. Quisque dictum pretium arcu. Nullam ligula pede, rutrum nec, rhoncus a, tempus at, est. Phasellus placerat, nisi eget eleifend adipiscing, nisl nunc fringilla lorem, vel posuere purus nisi a enim. Nulla in lacus. Nam laoreet, quam fringilla tincidunt condimentum, erat lectus mollis sapien, id consequat nulla neque auctor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dignissim quam a purus. Praesent vitae enim ut risus fringilla commodo. Donec vehicula, velit a lacinia scelerisque, odio neque posuere ipsum, eu tempus lectus purus nec lectus. Proin fringilla mollis ante. Phasellus ligula mauris, aliquam ut, pulvinar id, congue non, dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin adipiscing. Phasellus ultricies egestas augue. Maecenas iaculis rhoncus felis.
Nunc porttitor imperdiet ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Integer convallis tempor enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vulputate lacus eu nisl. Aenean lobortis adipiscing mi. Vestibulum blandit sem vel nulla. Aenean non lorem id erat tristique hendrerit. Nullam vitae mi. Nulla bibendum, tortor sed venenatis elementum, lectus ante commodo justo, id vulputate justo risus nec ante. Morbi massa.
Fusce fringilla, est vitae sollicitudin pharetra, neque felis vulputate massa, vel ullamcorper metus lorem vitae justo. Donec luctus mi vestibulum neque. In sit amet justo. Suspendisse sapien. Curabitur ultricies, tortor at vulputate tempor, ligula justo vulputate magna, dictum gravida purus massa et erat. Sed accumsan cursus diam. Aliquam iaculis pede sit amet massa. Morbi rhoncus ipsum et lectus. Etiam ut augue. Nam orci ligula, venenatis sit amet, vehicula a, aliquam eu, tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer in magna. Vivamus vel felis vel magna fermentum cursus. Fusce diam lorem, hendrerit ac, semper vitae, cursus vitae, nibh. Fusce lorem orci, mattis quis, laoreet vel, commodo in, libero. Etiam ultrices. Pellentesque purus urna, hendrerit et, porta ut, aliquam at, ligula. Morbi quam. Aenean volutpat, libero sit amet posuere rutrum, purus pede ullamcorper ante, non pellentesque augue risus sit amet nisi. Etiam quam dolor, venenatis sed, lobortis sed, pretium iaculis, mauris.
In consectetuer dolor a turpis. Fusce commodo metus sit amet dui. Curabitur hendrerit adipiscing tortor. Suspendisse molestie arcu eu dui. Morbi at massa laoreet quam rutrum suscipit. Duis lorem. Ut egestas sapien nec odio. Vivamus cursus turpis ac metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed et est at sem placerat aliquam. Etiam pellentesque justo. In vulputate volutpat nulla. Cras magna eros, fermentum vel, rhoncus ut, mattis fermentum, velit. Vivamus molestie ante a dolor. Proin egestas, massa ac hendrerit placerat, mi mi sollicitudin tellus, eget mattis pede augue ac risus. Proin tempus porttitor orci.
</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vulputate enim volutpat quam. Nullam vulputate commodo dolor. Integer consectetuer eros eget lacus. Fusce a urna pharetra sem vehicula tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tellus velit, euismod ac, nonummy vel, porttitor sit amet, mauris. Pellentesque posuere. Vivamus augue neque, lacinia id, suscipit et, placerat vitae, tortor. Sed ac risus. Maecenas eget pede ac elit rhoncus nonummy. Ut ac libero ac eros volutpat eleifend. Cras at velit a dolor bibendum fermentum. Aliquam congue tincidunt erat. Quisque volutpat, enim porta bibendum hendrerit, urna mi eleifend nibh, eu sagittis neque ipsum at tortor. Donec ligula est, feugiat eget, eleifend ac, convallis in, sem. Mauris posuere nisi vitae nunc semper vestibulum. Sed ut quam a justo malesuada luctus. Aenean blandit tortor porta lacus. Suspendisse elementum sapien auctor justo.
Aliquam erat volutpat. Vestibulum at purus a pede tempor aliquet. Morbi purus. Mauris id erat non nulla laoreet scelerisque. Aliquam ut leo. Curabitur ac metus accumsan ipsum tincidunt vulputate. Nulla sem. Aliquam erat volutpat. Praesent consequat dapibus eros. Proin commodo mauris et pede. Cras urna tortor, convallis non, egestas a, aliquet vel, augue. Etiam erat justo, dictum blandit, sollicitudin at, egestas eget, lorem. Ut imperdiet. Quisque lacinia eleifend libero. Nunc ornare turpis a felis. Vivamus et lacus. In velit dolor, laoreet a, convallis sit amet, interdum sit amet, nibh.
Suspendisse potenti. Aenean tincidunt tortor nec sapien. Morbi consequat lacinia magna. Aliquam erat volutpat. Aliquam orci sem, facilisis et, convallis sed, tempor sed, ligula. Curabitur urna. Pellentesque quis augue. Vestibulum a metus faucibus sapien tristique facilisis. Vestibulum ac purus ac urna ornare vehicula. Curabitur sed turpis. Curabitur tincidunt lorem ut leo. Nulla dui. Donec nulla elit, ullamcorper sed, interdum vel, pulvinar ac, risus. Integer ut nisi in urna convallis consequat. Morbi at nisi. Nam imperdiet. Mauris vel urna at magna accumsan congue.
Etiam non lacus. Mauris massa mi, dapibus vitae, aliquet et, sagittis at, ipsum. Donec metus. Aliquam erat volutpat. Morbi vel lorem a mi eleifend egestas. Fusce euismod eleifend purus. Nam non massa in tellus eleifend consectetuer. Cras a massa sit amet arcu interdum porta. Nam dignissim consequat nibh. Aliquam rutrum massa eu quam. Integer luctus dui non mauris. Quisque sit amet velit. Praesent viverra. Aliquam a nisi ac felis aliquam aliquet. Fusce tempus accumsan augue. Etiam hendrerit, neque sed euismod viverra, leo sapien vestibulum neque, euismod lacinia lorem eros ac eros. Proin blandit.
Aenean sodales ligula et libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris luctus dapibus diam. Praesent vel dolor ornare leo dapibus feugiat. Donec et enim et eros rutrum commodo. Phasellus et eros vitae felis gravida feugiat. Nunc vestibulum neque ac pede. Nam nulla quam, condimentum ac, ornare id, hendrerit nec, mauris. Nam gravida, nulla a mattis tincidunt, nisi erat facilisis est, sed lobortis pede turpis sed nunc. Ut commodo, magna nec pellentesque fringilla, nisi sapien facilisis eros, ac lacinia dui nisi vitae nisl. Proin eget diam. Proin et risus. Integer nunc. Pellentesque sed dolor at velit sollicitudin rutrum. Praesent accumsan nulla non felis. In viverra augue eu justo. Mauris nec dui. Nullam non nisl eget nunc laoreet hendrerit. Donec mollis.
</div>
</body>
</html>background-image: https://img92.imageshack.us/img92/1931/bannerkb2.gif;
working?