Magazine Style

With Pixel Perfection

Have you ever wondered how to center the image in your Blog or Web page and let the text wrap around the image?

The use of a centered image with wrapping text is common in magazine layout so why not put it in a Blog or Web page? Our image is 160 pixels wide so our leftpic is defined as half of the width - 80 pixels wide. The rightpic is defined as 80 pixels wide. The image is 239 pixels high so we type in enough text to make the text wrap around the bottom of the photograph.

CSS Floating Image...

This is a two-column div layout with an image that is floating in the center. The image is contained in two separate columns. The left and right columns are also floating. There is only one image. We put the image in a background float and specified that we want to display the left half, that's 80 pixels, of the 160 pixel width image on the left side. We have to make sure that the leftpic float width plus the rightpic width will not cause the middle of the image to split. We need pixel perfection.

There's a little trick in the CSS here that helps when composing a new layout. We defined a class named showme that allows us to turn the borders on. It's helpful with position sensitive code to display the borders while testing. To turn the borders on we change the color of showme to any color that will display. To turn the borders off we change the color back to either transparent or the color of the background.