Search code examples
cssalignmentresponsive-design

CSS: Box positioning and responsiveness


On several of my pages (currently the site is under development), some weather info will be shown: LINK CSS Problem Description: under the headline WETTER you can see 4 boxes. One is displaying weather from today (HEUTE) and three boxes underneath display the weather from the next days. As you can see, the 3 small boxes are not exactly adding up to 100% framewidth. Also, the uppor wide box is of a slight different width.

--> how is is possible to reach the following? a) the 3 boxes together to add up to the exact same width as the wide box above WHEN USING A WEBBROWSER / IPAD in landscape view, and AT THE SAME TIME b) to have FOUR boxes underneath of each other (with 100% pagewidth) when browsing the page with an iPhone/Android. Looking forward to any hints you may have.


Solution

  • I think I have understood what you wanted.

    I have made a rough demo at: http://jsfiddle.net/Txjh5/

    Used an overall container to simulate your framewidth - this has a max-width. The boxes are at a percentage to match the top box but using margins I have created gaps between the boxes.

    .last {margin-right: 0;}
    

    Removes the margin for the last box.

    A media query is used for the smaaller screen size to force each box to 100% width.

    Sorry if I have misunderstood the question, but have a look at the demo as that explains things better than I can!