corner index.html
ContactTelephone & Email CreditsCaptions & Contributors Workshop Everything else RésuméDavid Segall Homewelcome

Back to Workshop Selecting a Java IDE Problem playing DTMF tones (source code) Installing Cloudscape/Derby with Tomcat and ODBC Free, heavy duty, databases Accessing GET data from JSF and Studio Creator/NetBeans VWP A Web Presence at Minimum Cost RAD Web Development Tools HTML/CSS Multi column layout


The displays in the heading are identified on the credits page.

bottom corner

"Fluid design" and multiple columns

According to the alt.html FAQ, fluid design means that "a website takes up all the space allocated to it by the browser". Purists insist that it is possible to design a web page for any display from a mobile phone - mine is 240x320 pixels - to a High Definition television (1920x1080). They reject the fixed width web page. A different, equally simple solution adopted in this paragraph, is to fill the entire width. This meets the definition of "fluid design" but makes the text too wide to read comfortably on a wide screen monitor. A number of clever attempts have been made using only CSS and HTML to vary the number of columns based on the viewport width. Richard Rutter describes them as "variable fixed width". Amazon does not attempt an HTML/CSS solution when it shows you its recommendations. It uses Javascript in the browser to inform their server how many items it should show across the page.

The obvious answer is a multi-column, newspaper style, layout that is implemented in the browser but Netscape dropped the multicol tag after version four and no other browser implemented it. Mercifully, it is coming back. This page demonstrates the CSS3 multi-column element. You can see the effect if you use Firefox or another recent Mozilla or Webkit based browser and you resize your viewport or change the font size. Ctrl + and Ctrl - can be used for the latter. The style elements that are used in this page are currently Mozilla and Webkit extensions. They track the CSS3 specification so they should be universally available soon. Meanwhile, if a browser does not support the multi-column styles, the following paragraphs will be too wide, just like this one. The .column class style has been included in this page so that you can use your browser's "View Source" to see it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus, metus in ornare semper, elit risus ornare elit, quis mollis tortor nibh a neque. Donec a scelerisque elit. Donec nulla tellus, placerat eget dictum at, cursus eu quam. Donec in felis nec ante mattis pretium condimentum eu sem. Nulla pharetra lorem et tortor dapibus condimentum. Donec iaculis, nulla eget convallis dignissim, risus dui elementum lorem, sed ornare purus erat eu nisl.

Integer posuere ante et sapien tincidunt posuere. Aenean accumsan facilisis venenatis. Vivamus interdum feugiat ipsum ut hendrerit. Aliquam varius sollicitudin enim, at varius nibh pulvinar id. Vestibulum aliquet mollis nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dictum fringilla ipsum a commodo. Nulla nec quam sed risus eleifend congue quis ac felis. Vestibulum rhoncus gravida nisi ac gravida. Suspendisse id felis ac sem porta vehicula. Nunc quis est in libero consequat iaculis vel nec est. Aliquam velit libero, placerat vitae auctor vel, pellentesque id nisl.

Mauris eu sapien enim, non lobortis lorem. Vestibulum quis pretium libero. Vestibulum cursus sem vitae massa elementum ultricies. Ut aliquam dapibus commodo. Aliquam erat volutpat. Praesent nisi purus, posuere vitae ultricies et, accumsan in ipsum. Donec feugiat aliquam pellentesque. Nam pulvinar enim id orci cursus tincidunt. Nam rutrum dignissim tempus. Sed massa nibh, ultricies vel dignissim a, consequat sit amet ligula. Cras porttitor diam nec leo consequat accumsan. In mattis, velit at dignissim tincidunt, lacus magna lacinia massa, ut mollis tellus sem a magna.

Cras eget urna nec odio vulputate hendrerit. Maecenas ut arcu massa, nec vestibulum odio. Nunc dictum, sapien aliquam porta elementum, est arcu vestibulum sapien, et volutpat velit sem vitae enim. Donec sollicitudin nunc in mi rutrum pharetra. Suspendisse ut est erat. Suspendisse potenti. Ut in lacus libero, sed euismod nisl. Proin a fermentum lorem. Aenean aliquet, sapien eget suscipit eleifend, purus turpis gravida justo, vel tincidunt metus ante quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et felis risus. Mauris convallis, ante at tincidunt mollis, lacus orci commodo augue, vitae faucibus augue urna vel lorem. Aenean viverra mauris at magna posuere id fermentum diam dignissim.

Nunc rutrum ipsum nec ante rhoncus ac placerat urna luctus. Nulla leo mauris, hendrerit sit amet lobortis id, luctus in magna. Sed malesuada, nibh id tincidunt semper, tortor orci rhoncus elit, ac tempus nulla mi eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed cursus risus vel lorem placerat auctor. Curabitur quis mauris libero, non tincidunt nunc. Phasellus sit amet justo ac nibh iaculis rhoncus. Integer diam felis, tristique ut dapibus a, rutrum ac augue. Vivamus lobortis cursus odio vel accumsan. Maecenas interdum ligula sed nisi molestie scelerisque. Curabitur orci mi, sagittis eu tempus ac, sagittis fringilla ligula. Donec varius lacinia cursus. Sed nunc ante, rhoncus nec iaculis nec, condimentum eget diam. Maecenas luctus mollis nibh, quis porta mi tristique nec. Etiam aliquet convallis massa, non laoreet lorem varius non. Fusce volutpat volutpat ipsum, sit amet mollis ante faucibus ac. Etiam non tristique est. Praesent metus metus, tempus eget facilisis sit amet, malesuada non est. Sed pharetra dui vitae mauris pulvinar posuere.

Nulla vitae scelerisque nisi. Nam quis ligula enim, nec sodales orci. In non dui libero. Integer risus diam, interdum ut venenatis sed, posuere quis elit. Curabitur et hendrerit metus. Mauris feugiat lacinia risus, sed placerat mauris tempor aliquet. Duis in urna felis, non sollicitudin risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sit amet enim odio, vel malesuada sapien. Duis sapien tellus, venenatis sed fringilla sed, eleifend id felis. Donec commodo cursus molestie. Duis eget diam sed felis posuere iaculis in et orci. Donec non justo augue, non vehicula nulla. Aliquam eros mauris, iaculis lacinia mattis sit amet, elementum nec dolor. Mauris semper vehicula eros, vitae consectetur ligula congue sed. Suspendisse et diam magna, luctus facilisis arcu. Fusce pellentesque tortor non dolor sodales et luctus neque lobortis. Nam commodo dictum turpis in luctus. Maecenas pharetra ullamcorper convallis. Sed nec metus ante, at luctus neque.

Etiam consectetur, mauris ut semper elementum, nibh nunc consequat metus, ut ultricies enim magna id purus. Vestibulum ut nisl ac orci tincidunt auctor at sed lacus. Vivamus venenatis mollis orci, a rutrum nibh sodales et. Mauris gravida ullamcorper rutrum. Ut suscipit, nulla sed auctor bibendum, est arcu sagittis purus, at porta eros nulla ut erat. Ut aliquam vestibulum nisi a eleifend. Vestibulum ut augue sit amet ipsum auctor eleifend. Nam eu risus eu felis consequat vehicula id ut felis. Aliquam auctor urna nunc, at tempor tellus. Morbi pulvinar pellentesque ipsum, a hendrerit turpis pharetra eget. Nunc quis ipsum nunc. Nulla in turpis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia arcu justo, sed imperdiet nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id tortor non elit varius bibendum. Fusce at quam quam. Nam laoreet mauris ac risus porta auctor. Praesent pharetra fringilla ultricies. Etiam sem mauris, eleifend in convallis vitae, venenatis vitae enim. Morbi in faucibus metus. Curabitur vel massa nec quam aliquet lobortis a in arcu. Proin ut risus ligula. Curabitur justo libero, sagittis vel condimentum eget, blandit a leo. Vivamus non massa diam. Vestibulum dictum lorem sit amet dolor consectetur sodales id non eros. Aenean eget massa eget turpis bibendum egestas. Curabitur nec elit eget ante feugiat tempor eu eget elit

Nunc congue, diam et faucibus pharetra, sem elit dignissim urna, at ullamcorper tortor diam eget massa. Aenean eget sem sit amet diam mollis venenatis. Integer pellentesque, magna sit amet commodo faucibus, lacus dui convallis neque, id vulputate magna mauris ut leo. Sed lobortis faucibus cursus. Cras in turpis eget ligula aliquam elementum. Maecenas lobortis lectus feugiat augue pretium pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel ante mauris. Ut ac dictum neque. Nullam non sem neque, ornare iaculis felis. In hac habitasse platea dictumst. Duis quis sem est. Ut lorem elit, sodales nec hendrerit eget, vestibulum in erat. Ut tempor lorem eu enim ornare malesuada nec eget sem.

bottom corner