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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Share Your Thoughts