February has been a busy month at OH!. We are proud to launch 3 brand new websites.

Novus Auto Glass Regina

http://www.novusregina.ca

Weyburn Security

http://www.weyburnsecurity.ca

International Performance Assessment Centre for Geologic Storage of CO2

http://www.ipac-co2.com

It’s been a few weeks since we’ve posted updated photos of the renovation. Things are coming along nicely; all the drywall is up, we’ve added a feature wall near the front entrance, plumbing is now roughed in, and we’ve ordered the carpet and paint. Next step is priming, first coat of paint, and the ceiling install. Stay tuned…

Let’s say you’ve decided to start selling tea pots that have clever slogans on the side of them for all of the hipster tea drinkers out there, and you want to sell those tea pots on your website. You’ve got everything planned out – inventory, branding, the whole deal. During the process of building your online store you will, at some point, have to face a pretty important decision: how are you going to accept payments for products?

There are a few major options to consider. Obviously, the step where your visitors are deciding that they want to complete an order with you and purchase products from your store is important. You want that last step as simple as possible and you need those users to have a completely hassle-free experience. So, with that in mind, what are your options? Read the rest of this entry »

The problem:

When floating multiple divs within a container you will come across a very strange occurance… The container (outlined in red for the example) will not continue to extend down around the elements which are inside of it. In this case the container has a background-color of #fff, which means that the area underneath the right-column should also be white.

View example.

To fix this problem the most common solution is using the clear property in an invisible div or br tag. This method works very well as long as you can keep track of your divs and you are properly clearing only what is needed. The problem that I have with this method is that it adds that little bit of extra markup to the code, when there is a much simpler and cleaner way to achieve the same result.

The fix:


#wrapper {
text-align:center;
width:800px;
margin:0 auto;
overflow:hidden; /* Reminds the container to stretch */
background:#fff;
border:3px solid #f00;
}


View example.

By setting the overflow value to hidden you are basically giving the element a friendly reminder that it should be doing something. You can also use the scroll and auto property to achieve this effect. However, using scroll will result in having scrollbars whether you want them or not. I find this method a lot easier to implement and maintain than using clears, and it helps to keep your source nice and clean.