How to align element based on the other element that is above

Tags: javascript,jquery,css

Problem :

So I have 20 tags or so and they all have absolute position. They are dynamically generated based on the response I get from an XML and they currently are aligned next to each other.

How can I align them to be 4 on each row, but with the 5th tag to be exactly under the 1st tag, the 6th tag to be under the 2nd and so on. Every tag has a different height. Normally, the first 4 should not require any aligment.

Here is the structure:


Here is my CSS for the tags:

.innerContent tr {
      background: none repeat scroll 0 0 #F3F3F3;
      border-radius: 5px 5px 5px 5px;    
      float: left;
      height: auto;
      margin: 0 5px 25px;
      padding: 0;
      position: absolute;
      transition: all 1s ease 0s;
      z-index: 5;

I doubt this can be achieved with CSS so I'm thinking JQuery. Everything I tried only made them all overlap 4 by 4.

Solution :

As I mentioned in my comment above, I would HIGHLY recommend AGAINST using a table for this. It doesn't seem like you are populating it with tabular data, so you are just using it as a layout tool. And for what you want to do that is a very bad tool.

Since you mentioned Twitter Bootstrap above, I would recommend you utilize their scaffolding grid system. To give a a very basic example, take a look at this jsFiddle on how I would approach this.

For completion sake, here is the HTML I used in the jsFiddle. This will line up 4 columns per row with a width of 220px each (based on their container width of 940px). If you want a different container size, you just need to tweak the width slightly.

Of course this requires the use of the Bootstrap CSS:

<div class="row">
  <div class="span3">Hotel 1</div>
  <div class="span3">Hotel 2</div>
  <div class="span3">Hotel 3</div>
  <div class="span3">Hotel 4</div>
  <div class="span3">Hotel 5</div>
  <div class="span3">Hotel 6</div>

    CSS Howto..

    How can I change the ckeditor iframe CSS styling

    How to make a webpage mobile friendly with css media queries

    How to create a table with CSS [closed]

    How to write CSS to convert div elements into a 3 or 4 column table?

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    Web Extension : How do I use “browser_style = true”?

    GWT how to add css style on Image Resource

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How can I style the n-th div with CSS

    Sub menu wont show when menu item hovered over (css html)

    How to avoid form-control in all inputs with Twitter Bootstrap 3?

    How can I get two form fields side-by-side, with each legend above the field?

    How to adjust responsive behaviour of menu bar's elements

    How to set alternate row color for a given attached diagram

    How to put text over Image

    How to correctly override inaccessible HTML content with CSS?

    Where Can I Learn How To Fit A Website To Fit Many Android Resolutions?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How can I target text input fields with CSS?

    How can
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How to remove CSS underline?

    How to override w3.css for table border

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    How to style ul horizontally

    How to position a label using css relative to an absolute positioned input box

    How does css position impact element width/height?

    How to change img margin inside a table using css hover

    How to select the parent's parent in CSS?

    How can I set different background images for different li with same class

    How to expand link on hoover? Add “<” “>” symbols around link?