Floating two columns of text to the right of an image? Options

[Barca123]

I am a bit stuck on this one.

I am looking to float two vertical columns of text next to an image. I know how to float text to the right or left of an image, but unforunately I do not know how to float two columns?

Any ideas?

[Christian J]

Float both the image and the first (or both) of the columns.

[Barca123]

THe image on the left and two columns of text to the right.

E.G - Image Column1 Column2


THanks

[Christian J]

Yes, try this:

CODE

<style type="text/css" media="screen">
img, p {
width: 100px;
float: left;
}
</style>

<img src="dog.jpg" width="100" height="50" alt="">
<p>Column1</p>
<p>Column2</p>

[MikeK]

With CSS3 you can create multiple columns of text in a container.

The easiest way to do what you request is to put the text columns into a container and format the text into columns using column-count in CSS. Then you can setup as many columns as you need in the container and just float left the individual container.

Just a new way of looking at things.

[Frederiek]

As far as I understand it, there's only partial support for CSS3 column layouts, even in modern browsers. See http://caniuse.com/#search=column

[MikeK]

That is correct, as with all CSS3 features that is not full support across all browsers as of yet. But if you use the rendering engine prefixes there is support as listed below.

Chrome - 4.0 -webkit-
IE as of version 10.
Firefox - 2.0 -moz-
Safari - 3.1 -webkit-
Opera - 15.0 -webkit-

They are all moving in the right direction and soon this will be a non-issue. The bigger issue is getting the users onto the newer browsers.

Mike
Web Development Training
OnTargetHTML5.com