css expanding based on portrait or landscape screen size ??

Question

I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.

So the div will expand when in landscape mode and shrink up a bit in portrait.

Any ideas?

Answer 1

Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).

I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.

With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

Check out this example page for more explanation, or this one.

EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.