PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How to align two responsive divs vertically without using flexbox?

 November 17, 2022     css, responsive-design, vertical-alignment     No comments   

Issue

I'm trying to use two divs side by side with responsive design. Left div contains an image which changes with page size. Right div contains a menu which will not change. When the page gets to a certain size (too small), the menu is supposed to under the image and stay in the middle).

But it also needs to be vertically aligned in the middle of the left div.

Should be centered vertically on bigger screens:

need to center

It works correctly on smaller screens currently:

works correctly on mobile

Here's my HTML:

<div id="container">
        <div id="content">
            <div class="row">
              <div class="column" style="background-color:#aaa;">
                <img class="header-img" sr="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
          </div>
          <div class="column" style="background-color:#bbb;">
            <table style="width:100%">
              <tr>
                <td>Menu</td>
                <td>Menu</td> 
                <td>Menu</td>
                <td>Menu</td>
              </tr>
              </table>
              <table style="width:100%">
              <tr>
                <td>Menu</td>
                <td>Menu</td> 
                <td>Menu</td>
                <td>Menu</td>
                <td>Menu</td>
              </tr>
            </table>
    </div>
</div>

Here's my CSS:

    #content {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
        background-color:red;
    }

    * {box-sizing: border-box;}

    body { 
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    /* Create two equal columns that floats next to each other */
    .column {
      float: left;
      width: 50%;
      padding: 10px;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
    }

    .header-img {
        width: 100%;
        max-width: 500px;
    }

    td {
        text-align: center;
    }

I tried everything, but all the other regular alignment methods break everything else.


Solution

You can use display:table and display:table-cell.

.row{
  display:table;
  width:100%;
}

.column {
  display:table-cell;
  vertical-align:middle;
  width: 50%;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display:block;
  }
}

vertical-align:middle keeps everything vertically aligned in the middle too.

Here's a CODE PEN so you can see



Answered By - jleggio
Answer Checked By - Mary Flores (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing