Div As Inline Element? Doesnt work in IE

[rkosh 0]

Here's the CSS:

div#skills {	margin: 20px;	border: 1px solid #000000;	display: block;	}div#skills div {	padding: 0px 20px 0px 20px;	display: table-cell;	}div#skills div h4 {	text-align: center;	color: #0066CC	}

and the XHTML

<div id="skills"><div><h4>Title</h4><ul><li>bleh</li><li>bleh</li><li>bleh</li><li>bleh</li></ul></div><div><h4>title</h4><ul><li>bleh</li><li>bleh</li><li>bleh</li><li>bleh</li></ul></div><div><h4>title</h4><li>bleh</li><li>bleh</li><li>bleh</li><li>bleh</li></div></div>

Trying to move away from using tables but I'm having the following problems with this. I want the three divs positioned horizontally, but the table-cell property is only working in firefox, not IE. (haven't checked in other browsers yet). inline doesn't work nor does inline-block. The span tag can't work here because of the <h4> tag inside of it (block-level inside of an inline level tag doesn't validate) And besides not validating, the page still views with the three divs positioned vertically.

[chiiyo 0]

You have to float the divs to get them to be positioned horizontally. Check out Glish for the "3 column layout" to see the exact coding.

[rkosh 0]

You have to float the divs to get them to be positioned horizontally. Check out Glish for the "3 column layout" to see the exact coding.

<{POST_SNAPBACK}>

Thanks.