CSS and Divs or SPANs to make two columns?

[>ssp-cdr<]

What I am trying to do is create two columns of text within a fixed width, but I don't want to specify the width of the individual columns. I thought DIVs or SPANs could do this with the right CSS but I haven't been able to get it to work. Perhaps this is a case where a table should actually be used? (and please don't suggest a UL!)

This is what I want the text to look like. The - would be in one column and the rest of the text in another.

- ksdjf djisdf sdkoflpsdj sdfj
  dfsdfsdf sdfs sdf fs dfs sdf
  sdfsd

This is the code I thought would do it.

<div style="width:300px">
<div style="float:left">-&nbsp;</div>
<div style="float:left">ksdjf djisdf sdkoflpsdj sdfj dfsdfsdf sdfs sdf fs dfs sdf sdfsd</div>
<div style="clear:left"></div>
</div>

But it makes the text look like this.

-
ksdjf djisdf sdkoflpsdj sdfj
dfsdfsdf sdfs sdf fs dfs sdf
sdfsd

Any suggestions?

[MrConman]

<div style="width:300px">
<div style="float:left">-&nbsp;</div>
<div style="margin-left:15px;">ksdjf djisdf sdkoflpsdj sdfj dfsdfsdf sdfs sdf fs dfs sdf sdfsd</div>
<div style="clear:left"></div>
</div>

In line 3, it was floating from the left, the same position as the previous line. So essentially, the code was positioning itself directly under the left point. By putting a left margin on it, it pushed the box to the right by 15px, and therefore allowing it to be placed beside. Hope this was some help.

[>ssp-cdr<]

Thanks. I played around with that. When I put a border around the DIVs the position of them changed which seems strange.

[vikram1vicky]

Hope following links solve your problem:

http://www.quirksmode.org/css/columns2.html

http://www.w3.org/TR/css3-multicol/

http://www.quirksmode.org/css/contents.html ( Scroll down to check compatibility of columns property with different browsers)

[resdog]

The issue you have is that you have not specified the width of the floats. I get that you don't want to do that, however, a float without a width defined will be as wide as possible to fit the content it contains or it will inherit the max-width of the container element if it's wider than that container element.

In your case, the second div that is floated left contains text that is wider than the container element, so the browser sets it's width dynamically to it's parent element, which is 300px. Because of this, it gets moved to be under the first floated item.

When working with floats, you should declare a width so you can get it to lay out as you want it to.