Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Sass

How To Align Three Divs (left/center/right) For Getting In Small Screen Left/right And Under Them Center Element

Post a Comment
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

Solution 1:

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>

Solution 2:

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>

Solution 3:

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.


Post a Comment for "How To Align Three Divs (left/center/right) For Getting In Small Screen Left/right And Under Them Center Element"