How to fix wrapping text around floated elements

Have you noticed how often you see an image and a paragraph next to it, with the text wrapped around the image?

That is something easy to do. Just add float:left to the image and the text will wrap around that image.

But what happens when you want the paragraph to look like a block next to the image? Without wrapping it under the image. Here comes the tricky part.

However, with this article I will show you a quick solution for this issue. Actually, a very simple and fast trick, but very useful in these cases.

Fix wrapping text around floated elements

Google Font API and Typekit solutions VS @font-face

A while ago you’ve read a quick tutorial here about setting up your website with custom fonts using @font-face. Since then I’ve been thinking to write about these alternative solutions, pros and cons.

The aim of this post is to briefly round up your options when using custom fonts in web design.

CSS gradients - quick tutorial

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now.

However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers.

With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

CSS gradients

PNG8 alpha transparency using Adobe Fireworks

PNG-8 with alpha transparency?

I know some of you will say that this is impossible, because that was exactly what I was saying when I found out about it.

But, Adobe Fireworks makes itself “guilty” about that and in this article I will show you how you can get a PNG-8 image with alpha transparency.

CSS3 font-face or how to use a custom font for your website

Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.

This article contains a simple and easy to implement tutorial about using the @font-face property.

7 tips to organize your CSS

Working often with CSS for my own website or for my job makes me trying always to be organized and that made me thinking about a thing. What is the best way to organize my CSS file(s)? With this article I will try to present you a short guide about CSS organizing.

9 FREE text editors tools for developers

Have you ever felt overwhelmed by the number of applications for web development you can find online and didn’t know what to choose?

I am sure you did, as I was there, too.

If you are in this situation or if you are looking for alternatives then read more, because in this article I will present you some free development applications you can use to edit your files.

Free text editors tools

Center a block element without knowing its width revised

You may wonder why I insist about this subject I already wrote but recently I was working for a project and I needed a simple and efficient solution for ALL browsers (including here our “beloved” IE6) to center blocks of unknown width - without specifying a width for each.

And meanwhile doing that I found a cross-browsers solution for that.

Center a block element without knowing its width

8 tools to optimize your images

Adobe Photoshop’s save for web does a very good job when it comes about optimizing images but what happens when you wanna go beyond that, when you wish to obtain minimum size for your images?

A smaller image means a faster web page, lower bandwidth consumption so you have a lot of reasons to optimize your images. In the following rows I’ll introduce you some tools that will help you achieve this.

Tools to optimize your images

5 CSS shorthand tips and how to optimize CSS

If you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips.

These tips and tricks apparently don’t seem to be so important at the first sight. But once you write thousands of CSS lines you will wish to optimize every single line.

Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller.

Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS file. So let’s have a look at some examples and see exactly how we can optimize a CSS file.