Title: Equal Column Height
Last modified: August 30, 2016

---

# Equal Column Height

 *  Resolved [tanabelego](https://wordpress.org/support/users/tanabelego/)
 * (@tanabelego)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/equal-column-height/)
 * I am attempting to create a “banner” at the top of my page that is actually two
   column layout. I would like the column height to adjust to the longest column
   and for the content in the right column to be vertically centered. I have cheated
   it for the moment by specifying a height, but it obviously does not adjust for
   screen size and looks horrible. Ideally, I would also like for the right column
   to appear below the left on mobile. You can see the horrible job I have done 
   already [here](http://sanantoniossc.com).
 * css:
    div.content { height: 125px; background-color: #b3efff; border-style: solid;
   border-width: 3px; border-color: #4dd9ff #b3efff;}
 *  #left {
    float: left; width: 75%; padding-left: 10%;}
 *  #right {
    float: left; width: 25%; padding-right: 10%; vertical-align: center;}
 * html:
    <div class=”content”> <div id=”left”> *****CONTENT******* </div> <div 
   id=”right”>   *****CONTENT******* </div> </div>
 * ANY help would be greatly appreciated. I am still learning as I go and want to
   keep the code as clean as possible.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Mr Case](https://wordpress.org/support/users/mr-case/)
 * (@mr-case)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/equal-column-height/#post-6800671)
 * you’re pretty close. I only made a few tweeks to your code if you want to give
   it a shot. I added lots of notes in the css so you can kind of tell what / why
   i did things.
 * the only thing i did to the html was add a wrapper to the content class you had.
   to allow for more precise control of the elements within.
 * here is the HTML:
 *     ```
       <div id="content-container">
           <div class="content">
             <div id="left">
               <em><big><strong>Welcome to your new SSC Website! Please explore our new features including…</strong></big></em>
               <ul>
                 <li style="text-align: left;">
                   <em>Quickly browse upcoming events in the new <b>SORTABLE TABLE</b> below!</em>
                 </li>
                 <li style="text-align: left;">
                   <em>Get <b>ONE-CLICK ACCESS TO GAME SCHEDULES</b> using this icon above!<img class="alignnone wp-image-2874" src="http://sanantoniossc.com/wp-content/uploads/2010/10/Schedule-Icon.png" alt="Schedule Icon" width="35" height="30">TIP: Select “Remember Me” when first logging in.</em>
                 </li>
                 <li>
                   <em>Click this icon at the top of the page to request <b>FREE GAME REMINDERS and RAIN OUT ALERTS</b> by text or email! <img class=" wp-image-2875 alignnone" src="http://sanantoniossc.com/wp-content/uploads/2010/10/Alerts-Icon.png" alt="Alerts Icon" width="35" height="30"></em>
                   </li>
               </ul>
             </div> <!-- left -->
             <div id="right">
               <a class="fasc-button fasc-size-large fasc-type-glossy fasc-rounded-medium ico-fa fasc-ico-before fa-edit" style="background-color: #616161; color: #ffffff;" href="https://www.surveymonkey.com/r/WDMQ65Q" target="_blank" data-fasc-style="background-color:#616161;color:#ffffff;">Share Your Feedback</a>
             </div> <!-- right -->
           </div><!-- content -->
       </div> <!-- content-container -->
       ```
   
 * and here is the corresponding CSS:
 *     ```
       #content-container { /* new container that spans entire screen */
           width: 100%;
           height: auto;
           background-color: #b3efff;
           border: 3px solid #4dd9ff;
           border-left: none;
           border-right: none;
           padding: 20px 0;
       }
   
       #content-container:after { /* clears the floats on the content */
           content: "";
           display: table;
           clear: both;
       }
   
       #content-container .content { /* content container that has a defined width, same as body */
           max-width: 1140px; /* this is what the body of your site is already */
           margin: 0 auto;
       }
   
       .content #right {
           float:right;
           width: 25%;
       }
   
       .content #left {
           float: left;
           width: 70%;
           margin-right: 5%;
           line-height: 1.3;
       }
   
       #left ul { /* unordered-list styles */
           font-size: 16px;
           margin-top: 14px;
           margin-left: 18px;
           color: #4A4A4A;
       }
   
       #left ul li { /* list-item styles */
           margin-bottom: 8px;
       }
   
       #left img {
           max-width: 24px; /* controls icon size */
       }
   
       #right a {
           min-width: 235px; /* make sure button doesnt collapse on resize */
           max-width: 240px; /* don't want it to get too long either */
           position: relative; /* allows movement from top to be able to position vertically. it is not responsive */
           top: 80px;
       }
   
       @media (max-width: 1140px) { /* make it break at the width of the original body */
   
           #content-container .content {
               max-width: 80%;
               margin: 0 auto;
           }
   
           .content #right {
               margin-top: 20px; /* add some space now that the left and right are stacked */
               width: 100%;
           }
   
           .content #left {
               width: 100%;
               margin: 0;
           }
   
           #right a {
               display: block;
               margin: 0 auto;
               position: inherit; /* reset position */
           }
   
       }
       ```
   
 * i added one breakpoint in there to ensure responsiveness
 *  Thread Starter [tanabelego](https://wordpress.org/support/users/tanabelego/)
 * (@tanabelego)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/equal-column-height/#post-6800690)
 * You are an absolute genius. Thank you so much for your help!
 *  [Mr Case](https://wordpress.org/support/users/mr-case/)
 * (@mr-case)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/equal-column-height/#post-6800691)
 * youre welcome. i saw you implemented the css i provided, but please note that
   i modified your html slightly. i assumed you had control over that. i wrapped
   the entire bit with an id of ‘content-container’. without that element in place
   the css is somewhat useless…

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Equal Column Height’ is closed to new replies.

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [height](https://wordpress.org/support/topic-tag/height/)

 * 3 replies
 * 2 participants
 * Last reply from: [Mr Case](https://wordpress.org/support/users/mr-case/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/equal-column-height/#post-6800691)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics