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:

<table>
  <tbody>
     <tr>
     <tr>
     <tr>
     ........
     <tr>
     <tr>
  </tbody>
</table>

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>
</div>

    CSS Howto..

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How do i put text under an img icon in a menu?

    How to make a div 100% accross

    Handle text as elements, how to hide with CSS?

    How to make an ad wrapper which displays a message if a user has adblock running?

    How to get rid of an automatically generated span via CSS (un-display)?

    How to ignore body element style when there is a class at element inside

    how to show different image in div per the screen size?

    CSS How to embed several Font-Weights at once

    Force browsers load CSS before showing the page

    How to start off on a tab built in javascript/html instead of it being blank and having to click on one

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to set the padding of QTableView cells through CSS?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How to use CSS :not() properly?

    How to improve this code to combine/compress CSS using PHP [closed]

    jquery - How to determine if a div changes its height or any css attribute?

    How to change checkbox's border style in CSS?

    How to make a HTML element fill a dynamically sized container using CSS

    How to make a split screen video with full height?

    How can I remove comments on-fly from my static CSS files?

    How to display vertical text in table headers with auto height / without text overflow?

    How to solve this (seemingly simple) formatting problem in CSS?

    How to create a two vertically stacked buttons next to a text input

    how to add css for div tag

    How to auto width a form element with CSS?

    How can I redirect a request file to real folder with htaccess?

    How to position three divs horizontally

    How to resize dynamic images coming from database in a responsive bootstrap website

    How to change color of disabled html controls in IE8 using css