How do I achieve equal height divs (positioned side by side) with HTML / CSS ?

by

You could use jQuery, but there are better ways to do this.

This sort of question comes up a lot and there are generally 3 answers…

1. Use CSS

This is the ‘best’ way to do it, as it is the most semantically pure approach (without resorting to JS, which has its own problems). The best way is to use the display: table-cell and related values. You could also try using the faux background technique (which you can do with CSS3 gradients).

2. Use Tables

This seems to work great, but at the expense of having an unsemantic layout. You’ll also cause a stir with purists. I have all but avoided using tables, and you should too.

3. Use jQuery / JavaScript

This benefits in having the most semantic markup, except with JS disabled, you will not get the effect you desire.

More Related Contents:

  1. How to add anything in through jquery/javascript?
  2. How to convert unordered list into nicely styled dropdown using jquery?
  3. I want to show list items as 2 or more columns (dynamic alignment)
  4. How to show live preview in a small popup of linked page on mouse over on link?
  5. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?
  6. Input type="text" with select functionality after clicking on Input type="text"
  7. How to dectect objects' overlaping situations in javascirpt? [closed]
  8. jQuery .animate function not responding properly
  9. Reloading a single div in an html page [closed]
  10. How to invoke animation when redirection in jsf?
  11. fixing slider on my website [closed]
  12. Only detect click event on pseudo-element
  13. Can I use HTML tags in the options for select elements? [duplicate]
  14. How to build simple jQuery image slider with sliding or opacity effect?
  15. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  16. jQuery Selector + SVG Incompatible?
  17. focus doesn’t work in IE
  18. Scale a div to fit in window but preserve aspect ratio
  19. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  20. Possible to associate label with checkbox without using “for=id”?
  21. How to Determine if ::before is applied to an element?
  22. Can you have a JavaScript hook trigger after a DOM element’s style object changes?
  23. jQuery in Chrome returns “block” instead of “inline”
  24. Detect browser wrapped lines via javascript
  25. Prevent iOS bounce without disabling scroll ability
  26. How do I make an area unclickable with CSS?
  27. How can I dynamically highlight strings on a web page?
  28. How to Bootstrap navbar static to fixed on scroll?
  29. How to use pagination on HTML tables?
  30. How can I reorder elements with JavaScript?

Leave a Comment