How to align three divs (left/center/right) for getting in small screen left/right and under them center element

Question

I have three divs left - center - right, I need in case if document is opened in mobile,

to show left and right elements in one line and under them center element

I need:

a) PC 

      [left] [ long text in center ] [right]

b) PC smaller screen !impartant!

      [left] [ long text     [right]
               in center ] 

c) Mobile (smaller then 736px )

      [left]  [right]
      [ text in center ]

I have found solution for (a) and (c) cases but it is not working for middle case (b)

look: http://jsfiddle.net/66fCm/692/

.wrap {
  text-align: center
}
.left {
  float: left;
  background: grey
}
.right {
  float: right;
  background: red
}
.center {
  text-align: left;
  background: green;
  margin: 0 auto !important;
  display: inline-block
}

<div class="wrap">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center | Far far away, behind the word mountains, far from
  </div>
</div>

i need all three cases (a, b and c) each of them for different screen sizes — Arthur Tsidkilov, Jan 25 '17 at 12:46

Nitheesh · Answer 1 · 2017-01-25T12:33:47.520

Try this. Set 100% width to the center element in mobile screen. I have attached the code snippet.

<!DOCTYPE html>
<html>

<head>
    <style>
        .wrap {
            text-align: center
        }
        
        .left {
            float: left;
            background: grey
        }
        
        .right {
            float: right;
            background: red
        }
        
        .center {
            text-align: left;
            background: green;
            margin: 0 auto !important;
            display: inline-block
        }
        
        @media only screen and (max-width: 736px) {
            .wrap {
                text-align: center
            }
            .left {
                float: left;
                background: grey
            }
            .right {
                float: right;
                background: red
            }
            .center {
                text-align: left;
                width: 100%;
                background: green;
                margin: 0 auto !important;
                display: inline-block
            }
        }
    </style>
</head>

<body>

    <div class="wrap">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
        <div class="center">
            center | A collection of textile samples lay spread out on the table
        </div>
    </div>



</body>

</html>

@arthur_3589897 All the A, B and C Cases are there. In Large and medium screen, the content will fit as per you mentioned and for mobile screens, the center div will be with 100% width. Please test by copy pasting the script in an HTML file with different screen sizes. — Nitheesh, Jan 25 '17 at 12:50

score 1 · Answer 2 · answered Jan 25 '17 at 12:40

1

In order to make the div.center collapsible you could use max-width on it and set it to display block.

Add a media query for the sizes when the div should start collapsing e.g.:

@media screen and (min-width: 400px) and (max-width: 550px) {
  .center {
    display: block;
    max-width: 370px;
  }
}

http://jsfiddle.net/66fCm/693/

Change whatever the min and max widths need to be on the media query, and however large you want the div.center to be.

answered Jan 25 '17 at 12:40

jonnow

814
2
10
19

i have tried your example - it helped me, after updating your code i have got what i need http://jsfiddle.net/66fCm/694/ Thank you – Arthur Tsidkilov Jan 25 '17 at 13:05

Johannes · Accepted Answer · 2017-01-25T13:00:11.403

NEW/CHANGED ANSWER:

If you change the order as shown below and use media queries, you can alternate between flexbox for large screens and a combined float/non-float scenario on smaller screens as shown below.

http://jsfiddle.net/fj6op9jb/

.wrap {
  display: flex;
}

.left {
  background: grey
}

.right {
  background: red;
  order: 2;
}

.center {
  background: green;
  margin: 0 auto !important;
}

@media (max-width: 500px) {
  .wrap {
    display: block;
    text-align: center;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .center {
    clear: both;
    display: inline-block;
    text-align: center;
  }
}

<div class="wrap">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center | A collection of textile samples lay spread out on the table
  </div>
</div>

best answer, Thanks – Arthur Tsidkilov Jan 25 '17 at 13:08 — Arthur Tsidkilov, Jan 25 '17 at 13:08

How to align three divs (left/center/right) for getting in small screen left/right and under them center element

3 Answers3

Linked