[css]faux columns layout???

[BasieP]

Beste jullie,

ik ben bezig met een website maar kom niet echt ergens uit.

dwz, ik heb een vrij standaard layout, een header, daaronder een linker kolom, en een rechter kolom.

de pagina is totaal 100% hoog.

nu moeten die twee kolommen allebij voledige hoogte worden (- de hoogte van de header natuurlijk).

tot daar nog goed te doen, echter nu wil ik IN die twee kolommen een mooi kadertje hebben. en die combinatie krijg ik niet voor elkaar.

hier een tekening:



faux columns werkt volgens mij alleen als je een achtergrond heb die doorloopt (dus repeat-y)
wat ik ook prima vind is een tabel van 2 cellen oid, maar dan moet ik daarin wel gewoon een divje kunnen maken waar me content in komt (dus ter grote van die rand)

[BikkelZ]

Probeer het eens in HTML 3.2 met tabellen. Als het niet < 1 minuut gefixt is, ben je te langzaam.

Waarom eens standaard gebruiken die een achteruitgang is voor wat je wil bereiken?

[mithras]

En als je een footer plaatst die je absolute tegen de onderkant zet en de onderrand van je kolommen voor rekening neemt?

BikkelZ schreef op donderdag 24 mei 2007 @ 21:55:
Probeer het eens in HTML 3.2 met tabellen. Als het niet < 1 minuut gefixt is, ben je te langzaam.

Waarom eens standaard gebruiken die een achteruitgang is voor wat je wil bereiken?

Is dat serieus?

DJ_Jorizzz schreef op donderdag 24 mei 2007 @ 22:01:
Post je code eens

Gokje:

HTML:

<div id="container">
  <div id="header"></div<
  <div id="left"></div>
  <div id="right"></div>
  <!-- <div id="footer"></div> zou ik dus plaatsen -->
</div>

[ Voor 26% gewijzigd door mithras op 24-05-2007 22:04 ]

[JorisPenders]

Post je code eens

[BikkelZ]

mithras schreef op donderdag 24 mei 2007 @ 21:58:
[...]
Is dat serieus?
[...]

Ga jij me vertellen dat het minder als een vuile hack voelt om het met CSS 'op te lossen' dan good old tabellen in 3.2 stijl waarbij 100% hoogte en 100% breedte gewoon doen wat je verwacht wat het doet? CSS icm HTML 4 of XHTML biedt gewoon simpelweg geen oplossing voor bepaalde standaard layouts, of maakt ze buitengewoon omslachtig.

Als ik iemand in dienst heb die het binnen 1 minuut gefixt heeft, en een ander die een topic moet gaan openen en uren gaat lopen kloten 'omdat het volgens de standaard moet', met welke van die twee moet ik dan blij zijn?

[Rowanov]

BikkelZ schreef op donderdag 24 mei 2007 @ 22:16:
Ga jij me vertellen dat het minder als een vuile hack voelt om het met CSS 'op te lossen' dan good old tabellen in 3.2 stijl waarbij 100% hoogte en 100% breedte gewoon doen wat je verwacht wat het doet? CSS icm HTML 4 of XHTML biedt gewoon simpelweg geen oplossing voor bepaalde standaard layouts, of maakt ze buitengewoon omslachtig.

Het is dus serieus

Ik zal kort toelichten wat het hoe en waarom is van het 'beter zijn' van css. Css biedt je de flexibiliteit om je semantisch correcte HTML (bij voorkeur) toch te voorzien van een mooi ogende layout. HTML geeft daarbij de structuur aan (dus secties met koppen, lijsten, paragrafen etc.) en css zorgt voor de layout. Nu is een good-old table bedoeld om tabulaire data in te zetten en valt een layout daar niet onder. Dit kan prima opgelost worden met elk ander element, alleen het gaat op een andere manier dan met tabellen en het heeft net als tabellen zijn eigen problemen. Css is zeker geen vuile hack en het advies wat je geeft heeft zeer weinig draagvlak op tweakers. Typ het voor de grap eens in in de search en je wordt begraven onder topics waar dit onderwerp wordt uitgevochten.

Als ik iemand in dienst heb die het binnen 1 minuut gefixt heeft, en een ander die een topic moet gaan openen en uren gaat lopen kloten 'omdat het volgens de standaard moet', met welke van die twee moet ik dan blij zijn?

Bij de persoon die een toegankelijke website maakt die handig is in het onderhoud en waarbij je dus niet door kluwen misbruikte tabel-elementen moet graven. Het is een kwestie van handigheid hoe lang je er mee bezig bent en ik weet zeker dat css sneller is dan gekloot met tabellen.

[ Voor 1% gewijzigd door Rowanov op 24-05-2007 23:09 . Reden: Nu ik mijn bericht teruglees zie ik dat het wat bot over kan komen, wat echter niet mijn bedoeling is. ]

[mithras]

Rowanov schreef op donderdag 24 mei 2007 @ 23:02:
[...]

Bij de persoon die een toegankelijke website maakt die handig is in het onderhoud en waarbij je dus niet door kluwen misbruikte tabel-elementen moet graven. Het is een kwestie van handigheid hoe lang je er mee bezig bent en ik weet zeker dat css sneller is dan gekloot met tabellen.

Toegankelijkheid is naast 'ideologie' een goede reden om juist wél een html4.01 site te bouwen^*. Je normaliseert je database, je scheidt in je serverside programming je datalaag van je presentatielaag dus het is niet meer dan normaal om dat óók te doen met de html/css combinatie.

Verder moet je er rekening mee houden dat door een goede structuur in je html je doelgroep groter is. Je kan met tekstbrowser (bijvoorbeeld de commandline browser lyx) een vieze tabel niet goed bekijken. Zo hebben ook gehandicapten grote moeite met het bekijken van niet semantisch correcte websites.

Er zijn 100'en redenen te bedenken waarom wél aan de html4.01 specificaties te voldoen (en binnenkort wellicht de html5). En niet in het 1999 tijdperk achterblijven met html3.2

*)Ik gebruik de quote om mijn verhaal aan te vullen, niet om erop te reageren.

[ Voor 3% gewijzigd door mithras op 24-05-2007 23:09 ]

[BikkelZ]

Het grappige is dat jullie met dezelfde argumenten komen waarmee ik vroeger ook mensen doodgooide, maar met de blijkbaar dan veruit superieure HTML 4+ en CSS-standaarden niet in staat zijn om het aangekaarte probleem op te lossen. Ik voorspel ook dat het probleem niet danwel met een onlogische hack opgelost gaat worden. En dan moet je misschien weer gaan nadenken of je meer hits van een developer hebt op je pagina of blinde mensen.

Maar het kan in principe ook wel met HTML 4 in quirks mode denk ik, maar dat is natuurlijk helemaal geen standaard

[Fuzzillogic]

Vaak kan het ook zonder faux columns, met CSS2. Alleen zit je dan weer met het stuk antiek dat IE6 heet.

Enfin, tabellen gebruiken voor design is gewoon volledig achterhaald. Faux columns is een vrij ideale 'hack', waarbij je het beoogde effect zeer eenvoudig kunt verkrijgen zonder te moeten inboeten in flexibiliteit en semantisch correcte mark-up. De nadelen, in zoverre je daarvan kunt spreken in dit geval, wegen bij lange na niet op tegen de voordelen.

Het aanraden van tabellen aan beginners vind ik not done, in zeer specifieke gevallen daargelaten (dit geval behoort daar niet toe)

[disjfa]

Met tabellen kan je alles 100% hoogte geven ongeacht 3.2 of 4.01 of xhtml dus waarom een oude standaard aangrijpen.

Wat je kan doen verder voor de faux column icm IE en de rest van de browsers is gewoon een achtergrond op je body geven. Dan ben je binnen 10 seconden klaar ipv 1 minuut zoals een bikkelz al zei.

Enige wat ik nooit begrijp aan de mensen die zo nodig 100% hoog willen gaan. Gooi dan informatie in je site zodat het past. En in je design past aangezien een 100% een groot verschil brengt voor je design als je het gaat hebben over een hoogte van 786 of 1200.

[ Voor 29% gewijzigd door disjfa op 25-05-2007 01:01 ]

[crisp]

BikkelZ schreef op donderdag 24 mei 2007 @ 21:55:
Probeer het eens in HTML 3.2 met tabellen. Als het niet < 1 minuut gefixt is, ben je te langzaam.

Waarom eens standaard gebruiken die een achteruitgang is voor wat je wil bereiken?

Ik wens je veel success in je toekomstige baan als slager, bakker of vuilnisman want met een dergelijke instelling mag ik hopen dat je de markt van serieuze webontwikkelaars niet lang meer zult vervuilen.

De enige reden dat standaarden niet echt aarden en zichzelf ontwikkelen is het feit dat de huidige marktleider op browsergebied de zaak laat versloffen, dat wil echter niet zeggen dat we ons dan maar naar de 'least dominor' moeten confirmeren...

[BasieP]

BikkelZ schreef op donderdag 24 mei 2007 @ 21:55:
Probeer het eens in HTML 3.2 met tabellen. Als het niet < 1 minuut gefixt is, ben je te langzaam.

Waarom eens standaard gebruiken die een achteruitgang is voor wat je wil bereiken?

omdat ik niet 10 jaar terug leef, maar nu.
ga jij tegenwordig ook nog een dafje kopen omdat ie ook rijd?

mithras schreef op donderdag 24 mei 2007 @ 21:58:
En als je een footer plaatst die je absolute tegen de onderkant zet en de onderrand van je kolommen voor rekening neemt?

mm klinkt goed ga ik vanavond even proberen

Gokje:

HTML:

<div id="container">
  <div id="header"></div<
  <div id="left"></div>
  <div id="right"></div>
  <!-- <div id="footer"></div> zou ik dus plaatsen -->
</div>

yu
zelfs dezelfde namen

Wat je kan doen verder voor de faux column icm IE en de rest van de browsers is gewoon een achtergrond op je body geven. Dan ben je binnen 10 seconden klaar ipv 1 minuut zoals een bikkelz al zei.

das bij mij allen dus niet van toepassing omdat mijn kolommen niet 1 achtergrond hebben

Enige wat ik nooit begrijp aan de mensen die zo nodig 100% hoog willen gaan. Gooi dan informatie in je site zodat het past. En in je design past aangezien een 100% een groot verschil brengt voor je design als je het gaat hebben over een hoogte van 786 of 1200.

dat snap ik niet. je bedoelt dat je het raar vind dat mensen de content van hun site aanpassen aan de layout? of lees ik het verkeerd.

* BasieP gaat gewoon scrollable elements plaatsen ipv de heel pagina te laten scrollen. de pagina blijft 100% hoog

[ Voor 32% gewijzigd door BasieP op 25-05-2007 08:39 ]

[BikkelZ]

disjfa schreef op vrijdag 25 mei 2007 @ 01:00:
Met tabellen kan je alles 100% hoogte geven ongeacht 3.2 of 4.01 of xhtml dus waarom een oude standaard aangrijpen.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html {height:100%; width:100%}
body {height:100%; width:100%}
table {height:100%; width:100%}
#kop    {background-color:yellow; color:black;}
#col1   {background-color:red; color:black;}
#col2   {background-color:green; color:black;}
#col3   {background-color:blue; color:black;}
</style>
</head>
<body>
<table>
<tbody>
<tr><td id="col1" colspan="3">Kop</td></tr>
<tr><td id="col1">col1</td><td id="col2">col2</td><td id="col3">col3</td></tr>
</tbody>
</table>
</body>
</html>

En dit kun je ook doen voor DIVs natuurlijk. Maar dan loop je weer tegen een boel andere problemen aan die je eerder niet had.

[b][message=28098242,noline]Wat je kan doen verder voor de faux column icm IE en de rest van de browsers is gewoon een achtergrond op je body geven. Dan ben je binnen 10 seconden klaar ipv 1 minuut zoals een bikkelz al zei.

....waarbij je borders dus niet kloppen.....

disjfa schreef op vrijdag 25 mei 2007 @ 01:00:Enige wat ik nooit begrijp aan de mensen die zo nodig 100% hoog willen gaan. Gooi dan informatie in je site zodat het past. En in je design past aangezien een 100% een groot verschil brengt voor je design als je het gaat hebben over een hoogte van 786 of 1200.

Bedenk alleen dat bij falende standaarden 25% zich er bij neer legt op jouw manier en 75% gewoon weer tabellen gaat gebruiken.

[OkkE]

Ik neem aan dat de kolommen een vaste breedte hebben? Dan kan je faux-columns gebruiken, en een border-top + border-bottom, of twee achtergrond afbeeldingen (op elementen over de kolommen background) heen.

BikkelZ schreef op vrijdag 25 mei 2007 @ 08:40:
[...]
Bedenk alleen dat bij falende standaarden 25% zich er bij neer legt op jouw manier en 75% gewoon weer tabellen gaat gebruiken.

Onder andere door mensen zoals jij blijven mensen met minder kennis tabellen gebruiken.

Waarom zou ik tabellen kiezen, als het enige voordeel is, de snelheid / het gemak waarmee dit ontwerp gemaakt kan worden? CSS biedt zoveel meer voordelen, en zo heel lastig is het niet eens.

[disjfa]

BikkelZ schreef op vrijdag 25 mei 2007 @ 08:40:
[...]
En dit kun je ook doen voor DIVs natuurlijk. Maar dan loop je weer tegen een boel andere problemen aan die je eerder niet had.

Je bent de hele tijd html 3.2 aan het ophemelen en je komt aan met een voorbeeld die 1. niet 100% werkt en 2. html 4.01 gedefinieerd is.

En 100% hoog + scrollbalk... is toch over het algemeen de gewone scrollbalk in je browser gebruiken... ?

[ Voor 14% gewijzigd door disjfa op 25-05-2007 09:20 ]

[BasieP]

disjfa schreef op vrijdag 25 mei 2007 @ 09:17:
En 100% hoog + scrollbalk... is toch over het algemeen de gewone scrollbalk in je browser gebruiken... ?

nee

als je de twee kolommen individueel wilt laten scrollen, of onderaan altijd een footer wilt hebben (en IE position: fixed; niet snapt)

[ Voor 17% gewijzigd door BasieP op 25-05-2007 09:52 ]

[Verwijderd]

Als je de kolommen individueel wilt laten scrollen is het niet heel moeilijk. Ik gebruik zelf altijd mijn eigen flexlayout techniek maar veel mensen vinden de techniek 'lelijk'
demo
blogpost
Hope it helps. 't Schijnt ook niet altijd in Safari te werken, maar dat kan ik niet testen...

[Fuzzillogic]

BikkelZ schreef op vrijdag 25 mei 2007 @ 08:40:
[...]
Bedenk alleen dat bij falende standaarden 25% zich er bij neer legt op jouw manier en 75% gewoon weer tabellen gaat gebruiken.

De standaard faalt helemaal niet. Mensen die dat beweren hebben vaak juist last van falende kennis [van CSS/HTML].

[BasieP]

Fuzzillogic schreef op vrijdag 25 mei 2007 @ 13:41:
[...]

De standaard faalt helemaal niet. Mensen die dat beweren hebben vaak juist last van falende kennis [van CSS/HTML].

de standaard wordt door veel critici echt als 'ontoerijkend' bestempeld hoor


maaareuh, ontopic weer eventjes.

ik zit nu weer met een leuk probleempje.
in 1 van de twee kolommen wil ik onderaan een divje met wat zooi hebben.

Dit houd dus in dat ik behalve normale tekst ook elementen absoluut wil laten positioneren binnen die kolom.

Dit wil helemaal niet wanneer je faux columns gebruikt, of doe ik iets verkeerd?

ik heb hier een testcase online gezet:
http://basiep.nl/zooi/testcase/

[BikkelZ]

disjfa schreef op vrijdag 25 mei 2007 @ 09:17:
[...]

Je bent de hele tijd html 3.2 aan het ophemelen en je komt aan met een voorbeeld die 1. niet 100% werkt en 2. html 4.01 gedefinieerd is.

En 100% hoog + scrollbalk... is toch over het algemeen de gewone scrollbalk in je browser gebruiken... ?

Jij bent HTML 4.01 en CSS aan het ophemelen en je komt met geen enkel toepasbaar voorbeeld

BasieP schreef op vrijdag 25 mei 2007 @ 08:31:
[...]

omdat ik niet 10 jaar terug leef, maar nu.
ga jij tegenwordig ook nog een dafje kopen omdat ie ook rijd?

Nee natuurlijk niet. Maar mocht je nou een topic openen over het feit dat je Golfje GTI niet snel genoeg achteruit rijdt.....

[BasieP]

BasieP schreef op vrijdag 25 mei 2007 @ 18:06:

ik zit nu weer met een leuk probleempje.
in 1 van de twee kolommen wil ik onderaan een divje met wat zooi hebben.

Dit houd dus in dat ik behalve normale tekst ook elementen absoluut wil laten positioneren binnen die kolom.

Dit wil helemaal niet wanneer je faux columns gebruikt, of doe ik iets verkeerd?

ik heb hier een testcase online gezet:
http://basiep.nl/zooi/testcase/

niemand?

[Mei]

De kolom bestaat, dus je kan met alle plezier absoluut positioneren. Denk alleen dat ik niet 100% snap wat je nou precies bedoelt, dus als je ietsje meer uitleg zou willen geven, dan kan ik ook meepraten

@BikkelZ: Echte kerels blijven lekker bij 3.2 he Groot gelijk! Wie wil er nu dat 'moderne' 4.01 gebruiken. En 'semantische' code, pfff, mieterig geneuzel.

[Verwijderd]

Als de kolommen altijd even breed zijn kan je faux columns gebruiken, waarbij de footer grafisch voor de onderste rand zorgt. Je footer heeft dus als background image gewoon aan de bovenkant de randen van de 2 kolommen erboven. Ik heb het dan niet over een fixed footer, maar eentje die gewoon daadwerkelijk onder de 2 kolommen komt.

Daarmee maak je je graphics wat minder semantisch, maar dat boeit niet. Als de html zónder de graphics maar semantisch is.

[BasieP]

nou mensen ik kom er niet uit.

dwz, zelfs met een simpele tabel layout (zie hierboven die 3 cellen layout) heb je nog steeds mijn grootste probleem

de onderste twee cellen (of divs) moeten de overige hoogte opvullen (dus 100% - hoogte van de header) en daarin moeten twee divjes komen die middels padding/margin een aantal pixels van de kant af staan (zie plaatje in startpost)

het punt dat niet lukt is te zorgen dat ik (op wat voor manier ook) die twee 'border'-divjes te krijgen..

wat me wel lukt is om door middel van tables (die 3 cellen layout) de onderste twee elementen (table cellen in dit geval) de goede hoogte te geven, echter wil ik daar BINNEN dan die border op een aantal pixels van de rand af..

ow en die binnenste divjes (met die border dus) moeten gaan scrollen. (dus een optische illusie dmv een wazige footer is daarmee een beetje van de baan volgens mij)

hoop dat het zo duidelijk is..

[ Voor 10% gewijzigd door BasieP op 27-05-2007 22:43 ]

[Mei]

De rode rand komt in dezelfde afbeelding voor de header, extra spannetje, whatever. Als die maar fixed bovenaan zit. De blauwe lijnen zijn je fauxcolumns. Body BG dus. Groene lijnen zitten in je footer BG. Lang leve gezichtsbedrog Je moet soms even puzzelen met afbeeldingen om iets voor elkaar te krijgen. Het is lastig, maar je leert het vanzelf.

Succes!

[Verwijderd]

HTML: http://www.few.vu.nl/~rkranen/bla/
CSS: http://www.few.vu.nl/~rkranen/bla/style.css

Ik heb voor het gemak bij de horizontale lijn background-repeat: repeat-x; gebruikt. Vandaar dat je het ziet doorlopen aan de rechterkant. Je kan dat oplossen door de horizontale afbeelding niet te repeaten, maar gewoon de breedte te laten zijn die het uiteindelijk moet worden. Dan heb je ook meer controle over je lijn; kan je 'm wat minder saai maken.

[ Voor 120% gewijzigd door Verwijderd op 28-05-2007 01:04 ]

[Verwijderd]

BasieP, maak anders ff een plaatje van wat je nou precies wilt Ik kan het namelijk echt niet meer volgen.

[BasieP]

ik heb het plaatje van me startpost wat geupdate. (scrolbars toegevoegd)
ik hoop dat het zo duidelijk is.

@Mei en DOT:
bedankt voor de moeite, maar ik bedoel dus een pagina die 100% hoog is, en niet eentje die gewoon meesized met de inhoud.
Ik wil dus scrollbars BINNEN die kaders, en niet 1 aan de zijkant.

[hbrowser]

Mocht je nog interesse hebben, op deze website staan een hoop layouts met 2, 3 en 4 kolommen en evt. footers die meestal het gewenste effect opleveren.

Het mooie is, dat ze eigenlijk in alle gangbare browsers werken en met alle browser quirks wordt rekening gehouden. Uitleg staat er bij, maar let wel op bij het aanpassen van maten, doe 1 ding tegelijk en let op welke andere maten ervan afhankelijk zijn, want het komt vaak nogal precies Ben zelf al vaak opnieuw begonnen..
Als je het goed doet, heb je een strakke browser onafhankelijke column layout.

Succes..

[edit] de scrollbars zal je niet tegenkomen op die website, maar dat kan je altijd doen met overflow in een div binnen de betreffende kolom .. toch?

[edit2] zit er zelf nu mee te prutsen voor een eigen project, en het is niet zo simpel als ik dacht in edit1 .. als ik het voor elkaar heb post ik hier wel terug.. in de tussentijd hou ik het nog wel in de gaten

[ Voor 23% gewijzigd door hbrowser op 19-06-2007 22:14 ]

[moozzuzz]

BasieP schreef op vrijdag 25 mei 2007 @ 18:06:
[...]
in 1 van de twee kolommen wil ik onderaan een divje met wat zooi hebben.

Dit houd dus in dat ik behalve normale tekst ook elementen absoluut wil laten positioneren binnen die kolom.

Meestal moet je dan het parent-element positioneren zodat de absolute positions relatief tov het parent-element staan. Oplossing: parent-div expliciet position: relative meegeven.

[orf]

bedoel je zoiets:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>allememachies</title>
<style type="text/css">
    body, html{
        background: #80FF80;
        margin: 0;
        padding: 0;
        height: 100%;
    }
    #header{
        height: 200px;
        background: #808080;
    }
    #left{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 200px;
        margin: 220px 0 20px 20px;
        overflow: auto;        
        border: 1px solid #000; 
    }
    #right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 220px 20px 20px 240px;
        overflow: auto;        
        border: 1px solid #000; 
    }
    
</style>
</head>
<body>
    <div id="header"></div>
    <div id="left"></div>
    <div id="right">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sit amet risus eget felis 
        tempor sollicitudin. Aliquam id lectus. Nam urna. Etiam eros turpis, ultricies eget, pretium 
        eu, facilisis eget, leo. Pellentesque varius sem. Vivamus odio nulla, tristique ut, adipiscing 
        a, dignissim eu, eros. Etiam ultrices eros a elit vulputate venenatis. In sed tortor. Nulla 
        facilisi. Nunc tempus nisl sed augue dignissim fermentum. Nam pellentesque enim quis est. 
        Morbi posuere. Mauris purus.</p> 
        
        <p>Donec convallis lacus vitae ante. Nunc pellentesque, massa sit amet laoreet fermentum, felis 
        leo bibendum sem, nec varius risus tortor at libero. Ut in eros. Cras at orci ut ligula facilisis 
        feugiat. Phasellus posuere libero sed nibh. Aliquam massa quam, mollis at, posuere et, fringilla 
        sed, lectus. Sed faucibus, lorem nec hendrerit adipiscing, mi ligula tincidunt ante, eget accumsan 
        nibh lorem id magna. Vestibulum nibh velit, vulputate feugiat, congue vitae, accumsan quis, odio. 
        Praesent dui sapien, gravida id, vulputate eu, tincidunt ut, lorem. Cras non nulla accumsan ligula 
        placerat posuere. Fusce lectus. Nullam tincidunt nibh varius elit. Nullam mattis sem in felis.</p>

        <p>Integer pede. Vivamus tristique. Fusce tincidunt, arcu sit amet fringilla scelerisque, nunc nisi 
        elementum ante, sed hendrerit purus diam vel nisi. Etiam et magna. Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit. Maecenas commodo laoreet dolor. Curabitur sollicitudin. Nulla blandit 
        urna id neque. Maecenas odio quam, commodo eget, tempor vitae, convallis vitae, velit. Donec tortor 
        ligula, suscipit et, convallis sit amet, aliquet id, orci.</p> 


    
    </div>
</body>
</html>