Anyone know the best way to approach this layout?

I want two squares (all sides the same length) that are next to each other horizontally.

I want them to have a liquid size so that they each fill half the browser window whilst always being square.

Any ideas?

Thanks

Can't be done with CSS, width yes, keeping the height the same as the width will need javascript.

Thanks, don't suppose you know of any Javascript tutorials on how to do it?

We are talking about resizing a column? CSS can't handle it as chris said. You need javascript to monitor change in the DIV length / width and modify width / length accordingly.

document.getElementById("square1").offsetHeight = document.getElementById("square1").offsetWidth;