We Keep Coding

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

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

"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.

You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.

There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/

Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.

How do I obtain a floating element's left offset while it is outside the viewport?

Here's my situation. I've created several panels stacked side by side which are wrapped in a main container. Each panel takes 100% the viewport width and height. My goal is to be able to scroll horizontally to each panel when I click on their respective link. This works fine using a pure css approach. However, I'm learning jQuery and I wish to use the .scrollTo() method to achieve this.
When the panels were stacked one below the other (i.e vertically), I was able to obtain the top offset of each panel and scroll to their position nicely.
With the horizontal variation, I'm having troubles to obtain the left offset of the panels. I get a left offset of zero for all of them. If my logic is right, say the viewport is 1920px wide, the 2nd panel's left offset should be at 1920px, the 3rd at 3840px etc.
From the information I've gathered so far, it's because the panels are outside the viewport. And indeed, I've applied a width of 20% to the panels so that they were all visible in the viewport then I tried to alert their left offset. They were prompted to me successfully.
So how do I get around this issue ? It might seem like I'm reinventing the wheel but like I said, I'm learning jQuery so I need to understand why it's behaving as such and how I can solve this. Any help will be highly appreciated :) Below are snippets of what I have so far.
Thanks.
The Markup:
<div class="mainWrapper">
<section class="panel" id="panel-1"></section>
<section class="panel" id="panel-2"></section>
<section class="panel" id="panel-3"></section>
<section class="panel" id="panel-4"></section>
</div>
The CSS:
.mainWrapper, .panel {
position: relative;
height: 100%;
}
.mainWrapper {
top: 0;
left: 0;
}
.panel {
display: inline-block;
background: rgba(255, 255, 255, 1);
}
The Javascript:
$(document).ready(function() {
var $panelWrapper = $('.mainWrapper');
var $panels = $('.mainWrapper').find('.panel');
var $panelScrollPos = new Array();
$panels.each(function(i) {
//This is where I need help. It's not working
$panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);
alert('Panels position are: ' + $panelScrollPos[i]);
});
});
Please note that I have used .width() method to set the width of
.mainWrapper and .panel elements. I haven't included it in the snippet as it is working.

to be able to set your inline-block elements on a single line , no matter the width of the wrapper you should reset the white-space propertie:
#wrapper {
white-space:nowrap;
width:100%;
}
.child {
display:inline-block;
white-space:normal;
width:100%;
}
your fiddle updated : http://jsfiddle.net/n3e6xzbj/

You can try the getBoundingClientRect.
The result of that call has a left position which probably is what you seek.

Two div overlapping with variable height = without height on container

It is quite easy to make two div overlap when the size of the container div is known but what if the div heigh cannot ?
I tried to do it without manipulating container height:
http://jsfiddle.net/AJfAV/
But #text2 go over #text3 and do not "push" it.
How can the #container be resized automatically ?
I manage to achieve my goal using jquery ui but I feel this is not an elegant solution:
http://jsfiddle.net/AJfAV/6/

Is this what you need?
Updated fiddle:
I'm setting height to the default, auto, using jQuery, like this:
$("#container").css("height", "auto");
You can also set: height: auto; in CSS.

Do you need position:absolute? You can use absolute positioning if you don't want to do any arrangement, but a placement. The absolute positioning takes an element completely out of the flow of elements. They know nothing of its existent.
You may use floats and a technique to enclose floats. I'm using clear:
.cl-left {
clear: left;
height: .1px;
font-size: 0;
line-height: 0;
}
Don't forget to add <div class="cl-left"> </div>.
In addition, a negative margin is used. Therefore, #text2 is nailed to the right.
http://jsfiddle.net/AJfAV/7/

this can be solved if you removed absolute positioning of #text1 and #text2.
and make #text2 overlap #text1 by making both float:left and set margin-left:-30px for #text2.
now let's test it: http://jsfiddle.net/RPe4H/
the problem now is that when #text1 is toggled, #text2 will float to top left of #container, this happening because JQuery set display:none on the element when toggling is done.
now to solve this, put #text1 and #text2 inside containers with same width, so #text doesn't affect the flow when it is set to display:none, also you must set min-height:1px on the container of #text1.
now it is working as expected http://jsfiddle.net/MyyF6/1/

Side Panel in CSS

I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:

Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.

All major browsers and IE10 support flexbox. Not supported < IE10.

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance

You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.