Laurent Kretz

With the release of the final beta version of CabEasy.com (new name of ShareMyCab.net) planned early November, I started revamping the design of the website.

First, I decided to enlarge from 700px to 1000px. This is going to be a fixed width, but it should do with the vast majority of browsers. Then, I centered it. The real width is actually 960px - borrowed to Facebook. 960 pixels width is a super size for a simple reason: it has lots of common denominators ! What it means is that you can squeeze in that format 10 columns of 96px, 8 columns of 120px, 6 columns of 160px, 5 columns of 192, 4 columns of 240px, 3 columns of  320 and 2 columns of 480px. Super flexible.

Second, I cleaned up the messy css to try to rationalize the use of divs. Remember, I am not a pro-designer nor a pro-coder. I’m a good amateur, I guess.

Third, I created a simple template that can be used in various pages for various formats: 4 columns,  3 columns, 2 columns and 1 column, of course. Besides the divs are stack-able so I can mix any variation on any page.

So the result is here: the new CabEasy.com template.

I used a few tricks as listed below. I’m sure there are better techniques, so please let me know in the comments !

• Box / Div sizing and positioning: the famous box-model problem. If you givee a width:230px; to a div with a padding:10px; , IE will subtract the padding to the width and your div will be 230 pixels large all included (width+padding). As FF Firefox will give it a proper size of 240 pixels. The easiest way I found to get through this is add an additional “width” declaration with a “#” (number sign) in front of it: it will only be recognized by IE. So all browsers read the 230px width, and then IE increases it to 240px.
• To make sure all divs lines start on a new line and this is interpreted the same way in all browsers, I interject a “horizontal ruler” div after each lines of divs. I make it clear:both; to make sure the next div starts on a new line, and I reduce its size to 0. However, height: 0px; can be tricky for IE6, so I add a line-height: 0px to make sure the 0 height is applied.

Again, I’m not a professional coder, so please comment below if I am making complete non-sense !
Thanks !!
And here is the Css:

body {
text-align: center; /* Allows to center the main container div */
margin: 0;
font-family: Arial;
}

#mainContainer {
text-align: left; /* Counters the text-align:center of the body above */
width: 960px;
margin: 0 auto; /* Centers the container div */
}

#standardContainer {
clear: both;
display: block;
padding-top: 10px;
background-color: #fff;
width: 960px;
border: 1px;}

.oneQuarterBoxes {
float: left;
width: 230px;
#width: 240px; /* TRICK TO APPLY ONLY TO IE BROWSERS*/
margin: 0px;
border: 0px;
padding: 5px;
background-color: #ccc;}

.oneThirdBoxes {
float: left;
width: 310px;
#width: 320px; /* TRICK TO APPLY ONLY TO IE BROWSERS*/
margin: 0px;
border: 0px;
padding: 5px;}

.oneHalfBoxes {
float: left;
width: 470px;
#width: 480; /* TRICK TO APPLY ONLY TO IE BROWSERS*/
margin: 0px;
border: 1px;
padding: 5px;
background-color: #ccc;}

.twoThirdsBoxes {
float: left;
width: 630px;
#width: 640px; /* TRICK TO APPLY ONLY TO IE BROWSERS*/
margin: 0px;
border: 0px;
padding: 5px;}

.hr {
clear: both;
border: 0;
height: 0px;
line-height:0px; /* TRICK FOR IE 6 CAUSE DON'T RESPECT HEIGHT IN EMPTY DIV */
margin: 0px;
#margin-top: -6px; /* TRICK TO APPLY ONLY TO IE BROWSERS*/
}

If you enjoyed this post, make sure you subscribe to my RSS feed
or receive my posts by email !