Two Column Div Layout (with a left nav)

My first website was built in the 90s as a Starcraft fan site. Like most 15-year old’s websites, it didn’t go anywhere. I remember building the entire layout using HTML tables though.

The world has changed since then, and I still struggle to remember exactly what I need to do in order to build a basic, two-column layout. I gut tells me to go back to tables. The rest of the world says to use divs. So, here is how you do it with divs. This is very rough and probably doesn’t work in all browsers. I’m mainly putting this in here for my benefit.

The three main components you need here are:

  • A container div that holds the two columns
  • A left column
  • A right column

Here is some example code:

<div id="container">
  <div id="leftColumn">Here is some content</div>
  <div id="rightColumn">Here is more content</div>
</div>

The styles that make this work look like this:

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div#container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

div#leftColumn {
  float: left;
  width: 300px;
  background-color: #000000;
  height: 100%;
  overflow-y: scroll;
}

div#rightColumn {
  margin-left: 300px;
  background-color: #ff0000
}

The key things to know are:

  • float: left on the leftContainer makes that div hug the left side.
  • Setting the width of the leftContainer determines how wide your left column will be.
  • If you don’t set a margin-left inside of your rightColumn, the rightColumn div’s background will actually extend behind the leftColumn div.
  • overflow-y: scroll in the leftColumn div makes it so that the left column has a scroll bar. You must also have height set to 100% in that div for it to work.

Sources
http://mirificampress.com/show.php?id=106
http://stackoverflow.com/questions/4345285/adding-a-scroll-bar-if-div-extends-below-bottom-of-view-port

Advertisements

Ubuntu 12.04 Mod Proxy Install and Configuration

A common task you need to perform when you first install JBoss, Tomcat, WebSphere, or some other Java Application Server is to create a reverse proxy. This channels incoming traffic from the usual HTTP port 80 to the usual JBoss port 8080 (or 9080 if you’re on WebSphere for example). This is how to do it.

Assumptions

1. You’ve got Ubuntu 12.04 up and running
2. You’ve already installed Apache
3. You have root access (preferably through sudo)

Procedure

1. Install required packages

sudo apt-get install libapache2-mod-proxy-html
sudo apt-get install libxml2-dev

2. Create symbolic links to enable mod proxy in Apache

cd /etc/apache/mods-enabled
sudo ln -s ../mods-available/proxy_http.load .
sudo ln -s ../mods-available/proxy.load .
sudo ln -s ../mods-available/headers.load .

3. Load libxml2.so by opening /etc/apache2/mods-enabled/proxy_html.conf and add the LoadFile line as shown below

# Configuration example.
#
# First, to load the module with its prerequisites
#
# For Unix-family systems:
# LoadFile /usr/lib/libxml2.so
# LoadModule proxy_html_module modules/mod_proxy_html.so
#
LoadFile /usr/lib/x86_64-linux-gnu/libxml2.so
...

4. Load /etc/apache2/sites-enabled/000-default to configure the proxy. Add the following:

# This excludes this directory from the proxy. Content in this directory will be loaded through Apache instead of redirecting the request to port 8080.
ProxyPassMatch ^/directory_with_files_served_from_apache(.*)$ !

# This redirects everything except the above exceptions to JBoss.
ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/

Make sure this code is outside of tags. Generally, these lines should be part of the VirtualHost tag and not part of any child tags.

5. Restart Apache

sudo /etc/init.d/apache2 restart

Sources

http://knowledge-republic.com/CRM/2012/05/ubuntu-12-04-missing-libxml2-so-2-file-mod-security2/
http://abhirama.wordpress.com/2008/11/03/apache-mod_proxy-in-ubuntu/