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?
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):
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.
You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.
Quote from w3.org about the ‘orientation’ media feature:
A note/quote from developer.mozilla.org about the "orientation" feature:
So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.
JSFIDDLE DEMO (try resizing the view port)
Here are the representative media queries affecting portrait and landscape orientation.