Question

I’m using this CSS, it works in all browsers except chrome.

CSS:

#header {
    width: 100%;
    max-width: 1024px;
}

HTML:

<table id="header">
    <tr>
        <td>
        </td>
    </tr>
</table>

I want the #header to extend as far as possible, but at a maximum of 1024px. On chrome it just extends 100%.

What’s the correct way of doing this?

Answer 1

Try adding display: block to the CSS.

#header {
    background:red;
    width: 100%;
    max-width: 300px;
    height:100px;
    display: block;
}​

JS Fiddle: http://jsfiddle.net/nvkxR/