Emulating the Java BorderLayout in CSS

In putting together a CSS framework, I wanted to duplicate the functionality of the Java BorderLayout. There’s a fair amount of (generally partially complete) info on the web about how to do this, with many of the methods having one drawback or another, e.g. needing to put the center/body child container after both sidebars if using a float-based approach. As it turns out, the CSS table layout, introduced way back in CSS 2, makes it a snap. Try the JSFiddle for yourself.

The bone-simple CSS, with compass-point naming eschewed in favor of more standard CSS names:

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
	display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }
  
.borderLayout .bottom {
	display: table-row;	
}

The layout is then quite simple to use, the main charm of BorderLayout, and can be safely nested as well. Try the JSFiddle for yourself.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s