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. TutorialEqual 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 tutorialjQuery 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 TutorialQuick 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 TutorialEqual 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 TutorialMaking 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 TutorialElixon 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 TutorialjQuery: 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 TutorialTutorials: 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 TutorialNesting 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 TutorialFaux 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
Responses (0 )