Is it “legal” (and possible) to use an unordered list set to display “inline” like table cells? Styling each <li> with different widths and backgrounds and have styled content within those (like <p> tags) resulting in a fixed 3 column (or more) layout?
It’s not normal in any way.
don’t think a <p> inside a <li> is allowed.
Use divs to get your three column layout. don’t re-invent the (square )wheel.
Yes, it is. You can set the display: options for any element to be whatever you want, so you could have li {display:table-cell;}, although you would then need to figure out how to set the table-row and table holders. The other option is just to float the list items, but then you might struggle to get the height right.
<li> can contain either inline or block elements, so you can have <li><p>…</p></li> (but you can’t have <li><p>…</p>…</li>, it has to be one or the other (with the exception of containing nested <ul>s)).
But the question is … why would you want to? I’m struggling to think of a situation where that kind of large-scale content would be a legitimate use of <li>, it sounds far more suited to <div>s instead … can you give an example of how you would use it?
It’s just out curiosity that I was wondering. I noticed the inline lists I’ve using for my horizontal menus and just wondered if that would scale up to hold more content. I experimented with it briefly but had trouble getting the individual list areas to behave individually. It just seemed like a possible alternative to nesting DIVS and floating them. But it seems to be more trouble than its worth. I know table attributes are possible in the most updated browsers - i just (briefly) thought that a inline list might create a row-like structure in the same way and be accepted to larger number of browsers.
Thank for you input, though! I really appreciate it.
The thing about “inline” is that it doesn’t support multi-row content - so the contents of each “cell” would be limited to a single line of text, which could be quite restricting. “Inline-block” would get round that, but again you are cutting out older browsers.
Yes, it is possible and it has been done before. However it is advised against doing so.
If you are curious to see some examples there are several here -
http://www.tjkdesign.com/articles/float-less_css_layouts.asp
Even the author admits that they are just for demo purposes only.