Responsive 2-column layouts with CSS3

Using divs in web development is standard practice these days, but sometimes divs can’t do what tables used to do. Tables could easily create a 2-column layout where both columns had equal heights but a table couldn’t create a single-column layout when the window size changed. Divs work great for flowing layouts and responsive designs but their height property can be troublesome when a div is floated.

Here’s an example for creating a 2-column layout which realigns itself into a one-column layout when the window width is smaller than 660px.

 

2-column layout using divs:

Responsive layout coverts to 1 column:

Here is the code that will create the layout pictured above.

<!DOCTYPE html>
<html><head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0">

<!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
body {
     margin:0px;
}

/*
* Define default sizes for all browsers. 
* IE8 will read these properties.
* IE8 will not read media queries, 
* but that's OK because it only works on desktops
* Media queries are intended for non-desktop devices
* and more advanced browsers.
*/
.header {
     height:110px;
     background-color: #F7F7F7;
     border:1px solid #EEE;
}
#logo {
     top: 28px;
     background-size:100%;
     background-image: url('somefile.jpg');
     background-repeat: no-repeat;
     width: 151px;
     height: 64px;
} 
.column_layout {
     width:100%;
     margin:0px;
     min-width:480px;
     display:table;
     border-spacing:15px;
}
#inner-wrapper {
     padding:0px;
     display:table-row;
}
/** First immediate form elements 
* These could be divs as well.
*/
#inner-wrapper>form {
     width:50%;
     height:100%;
     display:table-cell;
     border:1px solid #EEE;
     border-radius: 5px;
     background-color: #F7F7F7;
     padding: 15px 5px 15px 5px;
     margin:0 0 15px;
}

/*
* Apply responsive layout for non-IE8 browsers
* This section works when the screen size is smaller than 660px
*/
@media all and (max-width: 659px) {
     #logo { /* smaller logo for smaller screens */
          top: 10px; 
          background-size:75%;
     }
     .header {
          height:60px;
     }
     .column_layout {
          display:block;
          border-spacing:inherit;
     }
     #inner-wrapper {
          padding:7px;
          display:block;
     }
     /* first immediate form elements */
     #inner-wrapper>form {
          margin: 15px 5px 15px 5px;
          padding:0px;
          width:auto;
          display:block;
     }
}

/* for displays > 660px */
@media all and (min-width: 660px) {
     .column_layout {
          display:table;
          border-spacing:15px;
          width:100%;
     }

     #inner-wrapper {
          padding:0px;
          display:table-row;
     }

     /* first immediate form elements */
     #inner-wrapper>form {
          width:50%;
          height:100%;
          display:table-cell;
     }
}
</style>
</head>

<body>
     <div id="content">
          <header>
               <div id=logo>
               </div>
          </header>

          <div id="column_wrapper">
               <div id="inner-wrapper">
                    <!-- Column 1 -->
                    <form id="form_col1" method="post">
                         <br />
                         <br />
                         <br />
                         <br />
                         <br />
                         <br />
                    </form>

                    <!-- Column 2-->
                    <form id="form_col2" method="post" action="">
                         <br />
                         <br />
                         <br />
                         <br />
                    </form>
               </div>
          </div>
     </div>

</body>
</html>

 

JSON Parsing Function for Shell Scripts

When testing REST-based web services that return JSON you may decide to use a shell script with cURL commands. Some services require a call to authorize a client and a second call to perform some action. In these cases, you would need to store the returned information in variables to use in subsequent calls. This is only a simple example of why you would want a shell script to parse JSON and return a value, but the usefulness of a JSON parser goes beyond a simple example like this.

Continue reading

A simple c++ string replace function

I’ve been privileged by higher-level language string functions, such as PHP’s easy to use str_replace function, that I’ve forgotten how performing such simple tasks in lower-level languages like C++ can be such a hassle. Aside from using some library (of which I’m not aware yet), here’s a simple string replace function which is similar to the PHP version. In this case the function will directly modify the original string, not return an instance of a new string.

Continue reading

Dynamically Modifying Input Elements on Click

Sometimes it’s necessary to modify an input form element when a user clicks on that element. In some cases, the form element can contain information regarding what information is appropriate, or what format is expected. The most common example is showing “mm/dd/yyyy” in a text-based date field and automatically removing that information when a user clicks on the field.

Continue reading

Javascript Benchmarking with JSBenchtest

Javascript benchmarking couldn’t be easier. With this webpage you can input any Javascript code and test how fast it is. The webpage will automatically call your code for 1,000,000 iterations and report the total amount of time that it took to execute. It will even output a variable that you can use for debugging. You can now test an algorithm, make a modification, and test again to see if the modification helped the execution time.

Click here to benchmark some code.

Continue reading

Switch vs If – Which is faster?

In programming there are two different methods that people use to test variables that have a number of different values. One method is to use the If statement and define blocks of code to perform. The other common method is to use a switch statement and list all possible values, perhaps including a default value, and perform some process inside the appropriate section of code.

Continue reading

Glasir – an open source PHP/HTML5 media player

Glasir is an open source PHP/HTML5 media player for a personal music collection of unlimited size. For use with Chrome, Firefox, and Android phones. It’s a project that I developed and open sourced for people to install it on their personal web servers and point it at a music folder.

Continue reading

Saving a Failing Hard Drive with GNU/Linux

I came to find out that my mother’s computer’s hard drive was failing. Programs took a long time to open and the computer would suddenly reboot for no reason. I discovered that the hard drive had bad sectors, which means potentially lost data if it decided to quit before I could save the data onto a different drive. Various GNU/Linux-based systems saved the day.

Continue reading