• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

How To Adjust & Fixed DIV Columns Heights with jQuery Plugin & CSS

Avatar of Noor Mustafa Raza Noor Mustafa Raza Updated: June 19, 2022

FacebookTweetPinLinkedInEmailPrint

I was working eCommerce website, and there is a need to display four equal column in one row and the other four in a 2nd column. I tried with Equal height – javascript, Equal Height Columns with Cross-Browser CSS, these tutorials are very helpful but not full-fill my client requirements. So I  tried Faux Columns, which gave the perfect solution.  Faux Columns provide the very easy way to by Making DIVs, using the CSS “Float Left” property, all have uniform heights; automatically adjusting to match the tallest DIV in the row.

All you have to play with the design and one image that fit with your design. A tutorial by DAN CEDERHOLM explained step by step procedure. Here are my CSS lines which I  get after modification.  Due to my client, I am unable to provide the link to this implementation but still, you can get the idea from my code.

/* ======= index page cat. display ===================*/
#wrapper {
margin: 0 auto;
width: 1110px;
}
.cat_a {
display:block;
color: #FFF!important;
background-image:url('cat-tab-bg.png');
min-height:40px;
padding-top:10px;
padding-left:10px;

}
.cat_a:hover, .hov_sh:hover {
text-shadow:2px 2px 2px #661111;
text-decoration:none;
}

.cat_ico {
float:right;
position:relative;
top:-11px;
}

#faux {
background: url('cat-bg.png');
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}

#leftcolumn {
display: inline;
width:264px;
padding:0px;
float:left;
margin: 0px 10px 10px 10px;
position:relative;
}
#leftmiddle {
display: inline;
padding: 0px;
width: 275px;
float: left;
margin: 0px 0px 0px 0px;
position:relative;

}
#rightmiddle {
display: inline;
width: 270px;
float: left;
margin-left:12px;
position:relative;

}
#rightcolumn {
display: inline;
position: relative;
padding: 0px;
width: 256px;
float: left;
margin-left: 13px;

}
.clear { clear: both; background: none; }

In case if you are not satisfied with above solution, here I am compiling a list of resources where you can get more info about how to get Equal Height Columns with jQuery and CSS.

Tutorials: equal Height Columns with jQuery


Tutorials: How jQuery Works

A basic introduction to jQuery and the concepts that you need to know to use it.

Tutorial

Equal Height Columns with jQuery

This concept has been adapted into a full-fledged jQuery plugin. Check it out here. And then read on to learn how this technique is done.

Detail tutorial

jQuery equal height columns plugin

 If you are looking for a plugin which will calculate the highest column and then assign that height to the rest of the panels then you should visit: Equal Height Columns with jQuery.

Detail Tutorial

Quick hits with the Flexible Box Model

I’d bet that you’ve done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module or Flexbox for short.

Detail Tutorial

Equal height – javascript

Many people have problems getting the heights of their divs the same length. There are good, valid, ways of doing this with only CSS. This isn’t one of them. This uses javascript to find out which div is the longest and then set the others to be the same length as that one.

Detail Tutorial

Making DIVs, using the CSS “Float Left” property, all have uniform heights;

Would you believe that was the best title I could come up with? Honestly, if you can think of a better one shoot me a line – I want to hear from you.

Okay, I’m a big fan of Fluid Design. I love to design websites/web apps that flow into the space available, from giant screened desktops to mobile phones, and always look like they were designed with exactly that screen size in mind.

Detail Tutorial

Elixon Fixheight

Creating equal height columns with CSS is not as easy as it may first seem. Elixon FixHeight is a solution that works in all common web browsers.

Detail Tutorial

jQuery: Boxes of Equal Height

Ever had parallel boxes on a website you’re developing, and wanted them to have the same height, but still wanting them to have dynamic height, i.e. not having to lock them to a certain height in the CSS? I certainly have, and it’s usually difficult. But jQuery provides a simple solution!

Detail Tutorial 

Tutorials: equal Height Columns with CSS


Equal Height Columns with Cross-Browser CSS

Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free, and JavaScript-free so it can even be used on the most strictly coded websites.

Detail Tutorial

Nesting sites expanding

Russian language article: he will give way to layout the sprawling site (and others, as it turned out, I do not know how to typeset), which use the last 2-3 years. This method is used for complex modular networks, it is easy to use, but difficult to understand and it has several drawbacks. In general, the information here useful and web designers, since the very model of the site must be properly prepared.

Detail Tutorial

Faux Columns by DAN CEDERHOLM

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a<div>, the <div> will only expand down the page 200 pixels.

Detail Tutorial

Fluid Width Equal Height Columns

Equal height columns have been a need for web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

Detail Tutorial

Equal Height Blocks in Rows

There are plenty of solutions for equal height columns using jQuery (like this one by Rob Glazebrook). The basic idea is to measure all of their heights and then set all their heights to that of the tallest one.

Detail Tutorial

50 Useful Coding Techniques (CSS Layouts, Visual Effects, and Forms)

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

Detail Tutorial

This post was orginally published on: January 12, 2012 and was updated on: June 19, 2022.
FacebookTweetPinLinkedInEmailPrint

Related Stories

  • Does The Automatic WordPress Upgrade Work On Your Hosting

    Does The Automatic WordPress Upgrade Work On Your Hosting

  • Why Your WordPress Comments Are Not Showing up

    Why Your WordPress Comments Are Not Showing up

  • How to Integrate Google Tag Manager without a Plugin in WordPress

    How to Integrate Google Tag Manager without a Plugin in WordPress

Avatar of Noor Mustafa Raza

Noor Mustafa Raza

Ex-Editor in chief

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Reader Interactions

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

linkedin resources

The Best LinkedIn Resources for Websites and Blogs

Disable Auto Save

How to Manage AUTOSAVE_INTERVAL in WordPress

Recent Topics

  • 27 Top SEO Companies in the World
  • 12 Ways To Monetize Your WordPress Blog
  • Comparing the Best Employee Engagement Software in the Market
  • Stellar Converter for OST Review: Best Tool for OST to PST Conversion
  • How To Use WordPress as an eCommerce Store

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!