Simple two-column table using CSS

[donishere]

I'm trying to get a table of two columns using CSS. My solution works in IE but not in Firefox...

http://www.osaa.org/tickets/

<div style="float: left; width: 40%; padding-right: 10px;">
	blah first column
</div>

<div style="float: left; width: 40%; padding-left: 10px;">
	blah second column
</div>

I used two float left's. Isn't that correct?

thanks

 

[kaht]

Float left should make them both sit side by side. However, it all depends on how much space you are giving them relative to their container. If you have 2 divs that are 10px wide a piece and you attempt to float them side by side in a 15px container, then the 2nd is going to wrap below the first because there will not be enough room for it to sit adjacent to the first. Try making the width a little smaller on the divs to see if they start behaving the way you expect them to.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[donishere]

Thanks kaht...

I tried using 10% width for both columns and the problem was still there.

I then decided to use pixel widths and the problem went away. So I guess Firefox doesn't play nice with percentages for widths.

 

[cLFlaVA]

firefox plays nice, trust me.

also, trust the w3 validator:

http://validator.w3.org/check?verbose=1&uri=http://www.osaa.org/tickets/

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

Also, throughout this thread, this is what we had to work with:

My solution works in IE but not in Firefox...

So I guess Firefox doesn't play nice with percentages for widths.

You will have to admit that this is a very poor description of the problem. We were left to guess what FF is not doing ourselves, or if that is even something that FF is not supposed to do in your scenario. You should try explaining it better as to what was not working in FF in a way that worked in IE. And since it seems like it is the columns not floating next to each other, it could be the width issue (however strange it might seems with you changing it to 10%) -- and then you will need to tell us something about the containing element as well. Since you're using percentages and pixels in order to determine the width of your floated element, accidents can happen.