CODEWITHSUNDEEP
jquerycsshtml
saratogahiker
saratogahiker

Reputation: 235

Positioning alternating un-nested DIVs relative to each other

I have 8 DIVs that alternate with respect to the content they hold.

DIV 1 - Category
DIV 2 - Sub-Category
DIV 3 - Category
DIV 4 - Sub-Category
etc.

The end goal, if possible, is to have the Category DIVs floating horizontally beside each other and the Sub-Category DIVs positioned below their corresponding Category DIV.

DIV 1 DIV 3 DIV 5 DIV 7

DIV 2 DIV 4 DIV 6 DIV 8

I am not allowed to change the current structure, such as nest DIV2 within DIV1.

I also want to keep away from absolutely positioning the Sub-Category DIVs due to the dynamic way the DIVs are created, which could result in changing widths, etc.

In essence, I want to be able to position a DIV relative to the DIV before it.

Upvotes: 0

Views: 153

Answers (2)

isherwood
isherwood

Reputation: 61083

This should get you close. If it's important that your groups be oriented vertically instead, you may have to look into using multi-column lists. If the divs vary in height you'll need to add an additional wrap to create rows containing the desired number of groups.

http://jsfiddle.net/isherwood/KhqyW/7

div.group {
    width: 45%;
    float: left;
}

var myDivs = $('div');

for (var i = 0; i < myDivs.length; i += 2) {
    myDivs.slice(i, i + 2).wrapAll('<div class="group"></div>');
}

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11340

Try

div:nth-child(odd) {
  float: left;
  margin: 0 1em;
}
div:nth-child(even) {
  float: left;
  margin-left: -4em;
  margin-top: 2em;
}

http://jsfiddle.net/ke22R/

Just play with the margins to get exactly what you want.

Upvotes: 1

Related Questions