[Solved] Trouble with 4 Elements next each other when its getting responsive

[Sperk]

Hi all,

i have a CSS problem I can`t solve on my own. I spent days to figure it out, but I think my CSS knowledge ist to vague to master this. I also tried to find a solution on the web but without any success so far. Hopefully you can help me out with this! For better illustrations I made that grafik Illustration and Example. (by the way as you may relized english is not my main language, tried my best…)

Basically I need 4 Divs side on side to display two informations next each other like „Start-Time: 14:00“ and „End-Time: 19:30“ Each oft the two informations should consists out of two elements with a FIXED width and height in this case: element one „Start-Time:“ and „End-Time:“ – element two „14:00“ and „19:30“ -> see grafik „Step 1“.

When the window-size changes (see grafik „Step 2“) the both elements should stay together and arrange under the first information pair.

When the window-size gets even smaller (see grafik „Step 3“) the elements oft he Information should arrange thmenself under each other.

In this example:

Step 1:

Start-Time:14:00 End-Time:19:30

Step 2:

Start-Time:14:00 End-Time:19:30

Step 3:

Start-Time: 14:00 End-Time: 19:30

In the grafik :

„Container 0“ is flexible in width (should fill the entire width oft the parent div) „Container 1“ and „Container 2“ should be are as widht as „Container 1.1“ and „Container 1.2“ or „Container 2.1“ and „Container 2.2“ together. „Container 1.1“ ; „Container 1.2“ ; „Container 1.1“ ; „Container 1.2“ should have fixed width.

It would be great to have a solution where you can even get more information pairs in that structure like 3 or 4.

Hopefully you can help me out with a solution to that! Thanks in advanced!!!!

[Paulie_D]

Here’s my version showing three versions based on the width of the wrapper.

http://codepen.io/anon/pen/nAHCw

Normally you would us media queries to adjust the various properties.

[Sperk]

Thanks a lot for that advice, so the way is to design all 3 settings like Paulie_D did and than adjust them with media queries. I will try this and give feedback!

Edit: Paulie_D, I tried your sample in firefox and it is complete messed up there. IE, Chrome seems to be OK. I thinks it`s because of ” box-sizing:border-box;” is there a way to realise this with “old-css” so that “old Browsers” are able to interprete it correctly?

[Sperk]

Thx a lot! I have modified the version of Paulie_D and got exactly what I looked for:

http://codepen.io/Sperk/pen/njyCv

[Author]

Posts