Website Design

Jamie · **Posted:** August 28th, 2009, 6:16 pm

To any web designers out there:

How do I keep my layout at a constant width on widescreen resolutions? The main table I have has a percentage width, so it gets bigger on widescreen. Does anyone know of a way to fix this?

Thanks.

Adbot · **Posted:** August 28th, 2009, 6:16 pm

crwire · **Posted:** August 28th, 2009, 9:16 pm

Should be able to just specify the table width by pixels instead of percentage for example <table width="500"><tr><td>wooooo</td></tr></table> would create a table 500 pixels wide with "wooooo" in it.

Chief Snake · **Posted:** August 28th, 2009, 9:16 pm

You may want to try using the max-width CSS property, however this is ignored by IE6- (for modern browsers it's fine). You can see it implemented in RuneWire, where the content expands with the page/window until a certain point and then it stays at that size. In essence it will allow you to set well.. a maximum width! Which works well in conjunction with a percentage width because you can set the maximum to use a different, perhaps more precise measurement such as pixels.

With a table, you'll probably want something like:

<table width="x%" height="x%" style="max-width: 1280px">
[table structure]
</table>

Hopefully this is what you're looking for.

addiv · **Posted:** August 28th, 2009, 11:11 pm

As long as you have a specific width you can do the following (using Chiefs example). I don't think it'll work with percentage widths however so you'll have to provide a number in the styles section:

<style>
.maxwidth {
max-width:1280px;
width: expression(this.width > 1280 ? 1280: true);
}
</style>

<tablewidth="x%" height="x%" class="maxwidth">
[table structure]
</table>

The first line of the maxlength style is for all browsers but IE, the second is for IE but will work with other browsers.

Jamie · **Posted:** August 29th, 2009, 1:46 pm

It works! Thanks everyone