Question

I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.

http://jsfiddle.net/efyJF/.

If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.

I feel like this is not the way the normal web pages work. How can i fix this.

Thanks

Answer 1

If I understand right, you are looking for something like this

The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.

The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won’t look the same.