Geek Answers Handbook

Floating divs to the left, make all divs height equal to the highest div in it row?

I'm trying to create a construct that will float a series of divs, all of the same classes, to the left. I want divs to fit into rows where the divs in each row are the same height, so there is no gap between the rows and the design elements. Is there a way to do this, or do I essentially need to set each div height?

I am floating to the left because I want the lines to be shorter if the width of the browsers is thinner.

I think this is confusing. Attached is an image of what I'm trying to do. alt text

+7
source share
5 answers

There are three options that I see:

Specify the height in your div style

It seems like the easiest answer, and since all the divs (in the image) look like the same height, this does not seem to be a problem for me:

div.class { height: 300px; }

Creating row containers

Create a container for each row of the div and determine its height, then give each child div a height of 100%:

 div.row-container { height: 300px; } div.class { height: 100%; }

Use table

Don't be afraid to use the table element to display data in tables. I'm not sure how well your semantically can be replaced with rows and columns of a table. But think that this is a potential candidate.

EDIT: I initially misunderstood thinking that you want to accurately simulate an image. My decisions are those that assume a constant height (what you expressed a desire to avoid). The counter argument to this position is that visually rows that are the same height are pleasing to the eye, and ultimately you need some control over how tall your columns are.

However, you can accomplish exactly what you want using JS:

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

+6
source

The answer differs depending on how you are going to implement it. If you adhere to css 2, then the solution will be either javascript (make all "columns" be the same height as javascript), or any set of methods to fake a column layout in css2. Here http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/ , for example.

there is a css3 project proposal to support multiple column layouts. This is currently supported by most browsers other than ie (at least the most modern versions). But youd be brave to insert into the production environment if you value availability / don't have a backup. See here http://www.w3.org/TR/css3-multicol/ for more details.

+1
source

I think I would not go for a table layout solution, since tables are not designed for layout. There are problems with some javascript solutions for the problem with the same column (for example, the jQuery columnizer plugin), but looking at the image of your example, I think that I would come up with something like the following (provided that the sizes of the elements are fixed):

HTML:

  <div class="Container"> <div class="RowContainer"> <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div> <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div> <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div> <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div> </div> <div class="RowContainer"> <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div> <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div> <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div> <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div> </div> </div>

CSS

  .Container { width:800px; position:relative; margin:0 auto; } .RowContainer { overflow:hidden; position:relative; height:200px; clear:both; } .RowContainer .Cell { position:relative; float:left; height:100%; width:200px; background-color:#ff0; }
+1
source

Recently found a good way: Since I experimented with elements in the style of float, so they behave correctly in a sensitive environment, it is not easy, rather like hell. If you want each element of the same “row” to have the same height, the best aproach for IE9 and above is flexbox.

Sample, we have 4 boxes that do not fit in the container, so we want them to move to a new line if they do not fit, but keep all the same heights (being unknown in height):

 <div class="container"> <div class="element"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p> </div> <div class="element"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p> </div> <div class="element"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p> <p> Lorem ipsum dolor sit amet. </p> </div> <div class="element"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p> </div> </div>

Using these styles only fixes this:

 .container { display: flex; display: -mx-flexbox; display: -webkit-flex; flex-grow: 0; -ms-flex-grow: 0; -webkit-flex-grow: 0; flex-wrap: wrap; width: 400px; /* Sample constraint */ background-color: red; /*Visiblity */ } .element { flex: none; width: 120px; /* Sample constraint */ border: 1px solid blue; /*Visiblity */ }

Check out this fiddle, it will give everything you want. https://jsfiddle.net/upamget0/

Source: CSS height 100% in automatic brother does not work in Chrome

More information can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
source

I use this solution by Chris Coyer from CSS tricks. Quick and easy, works like a charm.

  // IIFE (function() { var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(); function setConformingHeight(el, newHeight) { // set the height to something new, but remember the original height in case things change el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"))); el.height(newHeight); } function getOriginalHeight(el) { // if the height has changed, send the originalHeight return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")); } function columnConform() { // find the tallest DIV in the row, and set the heights of all of the DIVs to match it. $('#page-wrap > div.yourelement').each(function() { // "caching" var $el = $(this); var topPosition = $el.position().top; if (currentRowStart != topPosition) { // we just came to a new row. Set all the heights on the completed row for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // do the last row for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // If the content might change... probably debounce this and run it. // $(window).resize(function() { // columnConform(); // }); // DOM Ready // You might also want to wait until window.onload if images are the things that are unequalizing the blocks $(function() { columnConform(); }); })();

Source: https://css-tricks.com/equal-height-blocks-in-rows/

0
source

More articles:


All Articles