Yet another Holy Grail (3-column css liquid layout)
In the quest of creating a rocking and flexible layout for Riff’s redesign, I’ve started looking for the Holy Grail of the CSSs, the perfect 3-column css liquid layout. My requirements (self-imposed) where:
- No tables (of course)
- Use 100% of the available width
- Fixed width left column
- Right column with a minimun width, but scaling up when available width is enough. (This is because a site displayed on a 1900pixels wide screen, it’s useless to have the central pane with 1500px, the right column should start using some more space)
- Both right and left columns should expand to the bottom, the content cannot wrap around them
- Both columns must be collapsibles and the layout should continue working
Central pane should expand itself to the available width, regardless of the content not forcing it. This discards using “display: table” for the content div.(I had to add the display: table, otherwise the content wraps around (and behind!) the columns)
After digging in serious similar implementations like Matthew Levine’s which did not make it for me, because the content class uses padding at left and right to provide space for the columns and I need them to be collapsible, and the columns are not equal in height, or Faux Columns and this, and using the “padding: x/margin: -x” trick for the columns height, I ended up learning enough to put together something that (for the moment I think) works perfectly and satisfies my initial requirements.
Below are the Layout HTML and style with comments:
<div class="container"> <div class="column left">Lorem ipsum</div> <div class="column right">Lorem ipsum</div> <div class="content">Lorem ipsum</div> </div>
html,body
{
min-width: 500px; /* This avoids the html being compressed beyond this width */
}
.container
{
height:auto;
overflow:hidden; /*This hides the exceeding portion of the columns created by the padding/margin trick, thus avoiding the scrollbar of the browser to extend more than needed*/
}
.column
{
position: relative;
border-style: solid;
padding-bottom: 30000px; /*This extends the height of the column so the main content does not wrap around it*/
margin-bottom: -30000px; /*This 'reclaims' the extra height created by the padding*/
}
.left
{
float: left;
background-color: #0f0;
width: 200px;
}
.right
{
background-color: #ff453f;
width: 200px;
min-width: 25%; /*This makes the column start growing when the total width is greater than 200px / 25% = 800px.*/
float: right;
}
.content
{
border-style: solid;
background-color: #242eff;
display: table;
}
Instedd-Trinity Internship wrap-up
We have finished our first internship between Instedd and Trinity College. Juan Pablo and Qianqian did an amazing job putting together an SVM classifier using libSVM for suggesting tags inside Riff items. They tested the implementation with Reuters dataset and a Promed dataset that we created using Riff.
They ran 4 independent tests to find values for the specificity and sensitivity of libsvm against Reuters and Promed. Below is a graph of the results with Reuters:
Running it against Promed also had great results:
They’ve also worked in a Naive Bayes classifier to suggest tags based on previous evidence of symptoms relationships. You can find here a description of their work.
Thanks Qianqian, Juan Pablo, Trishan and everybody at Trinity College, it was a pleasure to work with you, I hope we meet again soon.
Next steps for Riff
This week a nice coincidence made possible that I met personally Taha Kass-Hout in DC. We’ve been working for Instedd creating a collaborative disease detection and surveillance platform with some machine learning tools.
Luckily the restaurant’s tablecloth was a paper, so we were able to put our thoughts there for the Riff next steps:
Thanks Taha for the great ideas!
Instedd Internships
Today we had the orientation presentation for an Internship that two students from Trinity College will be doing around Riff/RNA. They will be helping us build some classification tools involving machine learning with SVM’s and Bayesian classifiers as well as benchmarking the behaviour of those algorithms in scenarios as similar as possible as a disease outbreak. Below are some of the slides I’ve used during the presentation.
