CODEWITHSUNDEEP
htmlcsssass
Arthur Tsidkilov
Arthur Tsidkilov

Reputation: 5411

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

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>

Upvotes: 0

Views: 1384

Answers (3)

Johannes
Johannes

Reputation: 67776

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>

Upvotes: 1

jonnow
jonnow

Reputation: 858

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.

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

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>

Upvotes: 1

Related Questions