Skip to main content

Creating arbitrary grid layouts in HTML/CSS

I love building websites. But, the long arduous efforts to get page layouts done, scare me. So started experimenting with ways to create arbitrary grid layouts, so I can write a layout manager someday , to take care of this business for me.

I refer the reader to this excellent post on "What does width:100% do in CSS" to get a feel for block elements vs inline elements. To summarize, block elements generate a newline before and after them, but setting their width to something takes effect absolutely, i.e whether or not there is enough content inside the element to fill up the space. This is much like "fill_parent" in the android world. Inline elements are the opposite. They don't have the newline , but by default they expand only as much as their content, like "wrap_content" in android world.

However, what we need is a container that would behave as a block element, housing child elements that will be laid out horizontally, as well as vertically for a proportion of height/width of the parent. There are other display attribute values in CSS, that one can use to achieve these. I refer the reader to the display attribute reference. These work with modern safari, chrome and firebox browsers with HTML5. Note, the table-cell and table types, this is exactly what we need.. Without further yapping, here is the code.



The idea is simple, use display:block if you need vertical splitting. Use display:table-cell otherwise. Internal containers are all inline-blocks so that they will expand as needed

Using divs and spans :

<div style="width:50%;height:100px;display:table;"> 
<span style="width:10%;height:50%;border:1px solid;display:table-cell"> 
<div style="width:100%;height:100%;display:inline-block">
 <span style="width:100%;height:50%;border:1px solid;display:block"> 
<div style="width:100%;height:100%;display:inline-block">
<span style="width:100%;height:50%;border:1px solid;display:table-cell"> span 4.1.1 </span>
 <span style="width:100%;height:50%;border:1px solid;display:table-cell"> span 4.1.2 </span>
 </div> 
</span> 
<span style="width:100%;height:50%;border:1px solid;display:block"> span 4.2</span>
 </div> 
</span> 
<span style="width:30%;height:40%;border:1px solid;display:table-cell"> span 5 </span> 
<span style="width:60%;height:60%;border:1px solid;display:table-cell"> span 6 </span> 
</div>

Using ul and li:


<ul style="list-style-type:none;margin:0;padding:0;width:100%;display:table;">
<li style="display:table-cell;width:40%;border:1px solid">
<ul style="list-style-type:none;margin:0;padding:0;width:100%;height:100%;display:inline-block">
<li style="display:block;width:100%;height:50%;border:1px solid">
<ul style="list-style-type:none;margin:0;padding:0;width:100%;height:100%;display:table">
<li style="display:table-cell;width:50%;border:1px solid">list 1.1.1</li>
<li style="display:table-cell;width:50%;border:1px solid">list 1.1.2</li>
</ul>
</li>
<li style="display:block;width:100%;height:50%;border:1px solid"> list 1.2</li>
</ul>
</li>
<li style="display:table-cell;width:30%;border:1px solid">list 2</li>
<li style="display:table-cell;width:30%;border:1px solid">list 3</li>
</ul>


Here is a cakephp helper that uses ul/li s to create layouts.



<?php
App::uses('AppHelper','View/Helper');
App::uses('File','Utility');
/**
 * Layout helper to create any web page layout you need
 */
class LayoutHelper extends AppHelper {
     
    public $helpers = array('Html','Form','Common');
     
    private $dirStack = array();
     
    
    /**
     * Generate the attributes for the tag
     * @param unknown_type $attrs
     * @return string
     */
    function generateAttributes($attrs) {
        if ($attrs == NULL || count($attrs) <= 0)
        return '';
        $attrlist = ' ';
        foreach ($attrs as $k => $v) {
            $attrlist .= $k . '="'. $v . '" ';
        }
        return $attrlist;
    }
     
    function generateClassAttr($class, $options) {
        if ($options == NULL || !is_array($options)){
            return $this->generateAttributes(array("class" => $class));
        }
        else if (array_key_exists('class', $options)){
            $options['class'] = $options['class'] . ' ' . $class;
            return $this->generateAttributes($options);
        }
        else {
            $options['class'] = $class;
            return $this->generateAttributes($options);
        }
    }
     
    public function beginContainer($options=NULL) {
        array_push($this->dirStack, DIR_HORIZONTAL);
        return '<ul'.$this->generateClassAttr("layout-cntr", $options).'>';
    }
     
    public function endContainer() {
        return '</ul>';  
    }
     
    public function beginCell($options=NULL){
        $dir = $this->getCurrentDirection();
        $class = "layout-cell-h";
        if ($dir == DIR_VERTICAL)
            $class = "layout-cell-v";
        return '<li'.$this->generateClassAttr($class, $options).'>';
    }
     
    public function endCell(){
        return '</li>';  
    }
     
    public function beginCellContainer($dir, $options=NULL){
        array_push($this->dirStack, $dir);
        return '<ul'. $this->generateClassAttr("layout-cell-cntr", $options) .'>';
    }
     
    public function endCellContainer(){
        array_pop($this->dirStack);
        return '</ul>';
    }
     
    private function getCurrentDirection()
    {
        return $this->dirStack[count($this->dirStack) - 1];
    }
}


Comments

Post a Comment

Popular posts from this blog

Learning Spark Streaming #1

I have been doing a lot of Spark in the past few months, and of late, have taken a keen interest in Spark Streaming . In a series of posts, I intend to cover a lot of details about Spark streaming and even other stream processing systems in general, either presenting technical arguments/critiques, with any micro benchmarks as needed. Some high level description of Spark Streaming (as of 1.4),  most of which you can find in the programming guide .  At a high level, Spark streaming is simply a spark job run on very small increments of input data (i.e micro batch), every 't' seconds, where t can be as low as 1 second. As with any stream processing system, there are three big aspects to the framework itself. Ingesting the data streams : This is accomplished via DStreams, which you can think of effectively as a thin wrapper around an input source such as Kafka/HDFS which knows how to read the next N entries from the input. The receiver based approach is a little compl
21 comments
Read more

Setting up Hadoop/YARN/Spark/Hive on Mac OSX El Capitan

If you are like me, who loves to have everything you are developing against working locally in a mini-integration environment, read on Here, we attempt to get some pretty heavy-weight stuff working locally on your mac, namely Hadoop (Hadoop2/HDFS) YARN (So you can submit MR jobs) Spark (We will illustrate with Spark Shell, but should work on YARN mode as well) Hive (So we can create some tables and play with it)  We will use the latest stable Cloudera distribution, and work off the jars. Most of the methodology is borrowed from here , we just link the four pieces together nicely in this blog.  Download Stuff First off all, make sure you have Java 7/8 installed, with JAVA_HOME variable setup to point to the correct location. You have to download the CDH tarballs for Hadoop, Zookeeper, Hive from the tarball page (CDH 5.4.x page ) and untar them under a folder (refered to as CDH_HOME going forward) as hadoop, zookeeper $ ls $HOME /bin/cdh/5.4.7 hadoop
1 comment
Read more

Enabling SSL in MAMP

Open /Applications/MAMP/conf/apache/httpd.conf, Add the line LoadModule ssl_module modules/mod_ssl.so          or uncomment this out if already in the conf file Also add lines to listen on 80, if not there already Listen 80   ServerName localhost:80 Open /Applications/MAMP/conf/apache/ssl.conf. Remove all lines as well as . Find the line defining SSLCertificateFile and SSLCertificateKeyFile, set it to SSLCertificateFile /Applications/MAMP/conf/apache/ssl/server.crt SSLCertificateKeyFile /Applications/MAMP/conf/apache/ssl/server.key Create a new folder /Applications/MAMP/conf/apache/ssl. Drop into the terminal and navigate to the new folder cd /Applications/MAMP/conf/apache/ssl Create a private key, giving a password openssl genrsa -des3 -out server.key 1024 Remove the password cp server.key server-pw.key openssl rsa -in server-pw.key -out server.key Create a certificate signing request, pressing return for defa
1 comment
Read more