Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #152017
    Sperk
    Participant

    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!!!!

    #152021
    Paulie_D
    Moderator

    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.

    #152023
    Sperk
    Participant

    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?

    #152032
    Sperk
    Participant

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

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.