What can't be done in CSS yet?

Question

A while ago I was trying to figure out a way of doing this without using a table layout:

<table>
  <tr><td rowspan="2">Left column</td></tr>
  <tr><td>Right Top</td><td>Right bottom</td></tr>
</table>

Eventually I gave up and decided that it's impossible to do without tables (okay, CSS 3 might be able to, but waiting another 5-10 years isn't practical).

Has anyone got more examples like this? (Or even better, can you show me I was wrong?)

Answer 1

<div style='float:left;width:200px;height:300px;'>Left column</div>
<div style='margin-left:200px;'>
    <div>Right top</div>
    <div>Right bottom</div>
</div>

I think you want something like that. Remember, the css float ability is amazing. This is just an example.

Answer 2

You might want to check out the answer to this question. There was some interesting CSS code submitted for the answer - including a construct that solved the problem that I hadn't ever seen before. Lots of very useful links as well.

Answer 3

Someone answered the question if the design was doable. But I have an example of a thing that can't be done with css. For some reason you need to set a table's cellspacing and cellpadding explicitly. It can't be set through css even though there is the margin and padding property. This is something I've thought to be incredibly annoying because I always want to control the margin and padding on tables through css.

E.g.

<h1> This table won't have it's margin or padding reset </h1>
<table style="padding: 0; margin: 0;">
    <tr><td>a</td><td>b</td></tr> 
</table>

<h1> This table will... </h1>
<table cellspacing="0" cellpadding="0">
    <tr><td>a</td><td>b</td></tr> 
</table>

Answer 4

Another solution using the position property:

<style type="text/css">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .left-column {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #F88;
    }
    .right-top {
        margin-left: 50%;
        background-color: #8F8;
    }
    .right-bottom {
        margin-left: 50%;
        background-color: #88F;
    }
</style>


<div class="outer">
    <div class="left-column">Left column</div>
    <div class="right-top">Right top</div>
    <div class="right-bottom">Right bottom</div>
</div>

Answer 5

There are lots of other ways to make a table-like layout. There are even CSS tables. Really, there's never a reason to use a table for layout. Ever.

Something which can't be done at the moment is proper text-align: justify; The hyphenation doesn't work properly, but with the use of soft-hyphens you can make it behave quite appropriately I expect.

Answer 6

Something I have never been able to achieve in CSS is vertically centred images. I always end up with something like this (which I hate)

<style>
  td.pic_frame {
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
 } 
</style>
<table><tr><td class="pic_frame"><img ...></td></tr></table>

I just tried this using CSS tables as suggested by dylanfm

<style>
  div.pic_frame{
    display:table-cell;
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
  }
</style>
<div class="pic_frame"><img ...></div>

It works perfectly in all browsers except for, you guessed it, IE7

(tested in Firefox, Safari, Opera, Chrome and IE7)

Answer 7

To answer the question in the title, things which are awkward, very hard, or impossible to do:

• variables and calculations (expression doesn't count, and vars would be handy for things like colour sanitising)
• vertical centring
• setting dimensions to "space remaining" (like "*" in tables)
• mixing relative and absolute units effectively (the above would solve most of these issues)
• stylistic effects like rounded corners, fading backgrounds, drop shadows
• white space control in text
• standardised sub-pixel rounding (this is not directly a CSS issue, but a consequence of the environment)

Some of this stuff is penned in for the future already to be fair.

Answer 8

you can vertically center images with negative margins. Use a negative margin to move the "anchor point" of the image into its center. Then position the image relative in the middle.

Example for 800x800 image:

#centered
{
    position:absolute;
    top:50%;
    left:50%;
    height:800px;
    width:800px;
    margin: auto;
    margin-top:-400px;
    margin-left:-400px;
}

Answer 9

It's an obscure attribute, but the value attribute of the list item tag has no substitute in CSS, even though it's deprecated in XHTML 1.0 Strict and the standard instructs you to use CSS instead. So, the following is invalid:

<ol>
 <li>Item one</li>
 <li>Item two</li>
 <li value="4">Item four</li>
 <li>Item five</li>
</ol>

This has caused me a lot of grief putting certain legal documents on the web while using semantically meaningful code.

Answer 10

If you write some WPF application (writing XAML panels) so you will wish drop off by the window all html and css that you find...