Magazine Style
Sometimes we just want a picture to float in the middle of two columns. We dropped the picture down 15 pixels from the natural flow so that it looks good in both Mozilla Firefox and Internet Explorer.
This is the right side text. Haven't you ever wondered how to center the image in your Blog or Web page and let the text wrap around the image? It's easier than you think. The only calculation is to half the size of your picture, and half the size of the column if you don't want to use the width in the copy and paste code.
This is the left side of a two-column layout with an image that is floating in the center. The left and right columns are both floating with half of the image in the left column and half of the image in the right column. There is only one image and inserting the image is relatively easy. It does look best when each column has about the same amount of text.
And we can type more here or continue to type in the in the columns. I like the way the type wraps around the centered image.
When it's smaller without borders and background colors
like we showed here the center floating image looks easier. And it is easy. We do have to contain it in a div so we made this one 400 pixels wide. Most of us have 400 pixels to post in, right? If not then use a width that works in your page and use half of the width for the left column and half for the right column.
The font sizes and background will adjust to the sizes on your page.
If we right click on the image we view the properties to get the dimensions of the image. This image is 160 x 239. So, we will display half of the picture on the left and half on the right. Half of 160 is 80, right? The image isn't altered, only the display of the image.
We defined the post area as 400 pixels wide so that our larger image will fit. We split that in half and now each column is 200 pixels wide.
Link URL Last Updated: Monday, February 28, 2005