Question: I need to display several divs inline.
Since all divs must have the same width of the viewport and
they must be in the same line, I'm using **white-space: nowrap**
in the container.

```css
.container {
    white-space: nowrap;
}
.container > div {
    background-color: red;
    width: 100%;
    border: 2px solid;
    display: inline-block;
    padding: 20px;
    text-align: justify;
}
```

```html
<div class="container">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>tempor incididunt ut labore et dolore magna aliqua.
        <p></p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div>OPTION 2</div>
    <div>OPTION 3</div>
    <div>OPTION 4</div>
    <div>OPTION 5</div>
    <div>OPTION 6</div>
    <div>OPTION 7</div>
    <div>OPTION 8</div>
    <div>OPTION 9</div>
    <div>OPTION 10</div>
</div>
```

The problem is that only the first div is displayed correctly in the normal top
position. The other divs are shown with too much top margin. How can I prevent that?

I want all the divs are displayed in the same top position.

Thanks in advance

Answer: 
Assuming `this` is the object with ID `A`

```
$(this).closest('.message').prevUntil('.message:has(object)').prev().find('object');

```

[**FIDDLE**](http://jsfiddle.net/afzfcn02/)

traverses up to the closest `.message` then checks previous elements until it finds one that contains an `object` tag, then it stops, but it stops at the element before that tag, so we call `prev` to go one step further, and then use `find` to find the object tag.
You can use [prev()](https://api.jquery.com/prev/) to get the previous sibling element. That will get you partway there, but since each 'message' `div` is not guaranteed to contain an `object` element you'll need to use [prevUntil()](https://api.jquery.com/prevUntil/) or run your own iteration/search.

For instance:

```
var lastObj = $("#A");
var parent = lastObj.parent();
var previousObject = parent.prevUntil(".message:has(object)").prev().find("object");

```

Or without `prevUntil()`:

```
var lastObj = $("#A");
var parent = lastObj.parent();
var previousObject = undefined;
while (parent.length > 0 && ! previousObject) {
    parent = parent.prev();
    if (parent.find("object").length > 0) {
        previousObject = parent.find("object");
    }
}

```

Or as a runnable code snippet (using classes instead of `object` tags):

```js
$(".object").click(function(){
  var myId = this.id;
  var prevId = undefined;
  var parent = $(this).parent();
  var previousObject = undefined;
  while (parent.length > 0 && ! previousObject) {
    parent = parent.prev();
    if (parent.find(".object").length > 0) {
        previousObject = parent.find(".object");
        prevId = previousObject.attr("id");
    }
  }

  alert("clicked=" + myId + ", previous=" + prevId);
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message">
    <span></span>
</div>
<div class="message">
    <span class="object" id="C">C</object>
</div>
<div class="message">
    <span class="object" id="B">B</object>
</div>
<div class="message">
    <span></span>
</div>
<div class="message">
    <span class="object" id="A">A</object>
</div>
<div class="message">
    <span class="object" id="Z">Z</object>
</div>
```