How to check if 2 elements displayed on the same row?

- 1 answer

Ad

Assuming I have 2 elements on a responsive design like this:

<div id="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

both of them with style contains:

width: auto;
display: inline-block;
float: left;

And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.

So, I'm wondering, how can I check if they are on the same line with JavaScript?

Thank you

Ad

Answer

Ad

"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs

ADDITION after EDIT OF QUESTION:

width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:

#container {
  display: table;
}
.first, .second {
  display: table-cell;
  width: 50%;
}

Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.

Ad
source: stackoverflow.com
Ad