We Keep Coding

maintain the height of the content floating right same as the sibling div floating left, responsive

I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.

With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>

I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div

synchronizing scrolling between 2 divs with different text size

I can't find a way to synchronize two divs, with the same text, but different text size and padding.
I have two divs, one with a markdown text, and the other one with the html render of the markdown and I want to synchronize the scrollTop between the divs.
For an example, look stackedit.io

You can see the example of synchronizing two divs at: JSFiddle
HTML
Given you have two divs placed next to each other horizontally. Each of the divs contain another div and it is scrollable vertically:
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>
CSS
This is just to make two outer divs lie next to each other at the same baseline and make it scrollable vertically.
div.outer
{
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div
{
width:100%;
height:3000px;
}
JavaScript
The simplest approach is, bind scroll event to each of the outer divs, take the scrollTop value and apply to its counterpart div as follows:
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
So when you scroll on the left div, it synchronizes the right div, and vice-versa.

Can I make a link fill its parent without using display:block or display:inline-block?

See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?

Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.

I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/

You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Child div horizontally scrollable but fix parent window

I have a html, css question.
I'd like to make child div horizontally scrollable but parent window unscrollable.
Currently, the following is the code.
<div id="parent">
<div id="div1">
...
</div>
<div id="div2" style="overflow-x:scroll; width:2000px">
<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>
<img src="5.png"/>
<img src="6.png"/>
<img src="7.png"/>
</div>
</div>
But when scroll div2, it will make the whole window to scroll.
The following is the schematic diagram.
Anyone has any idea?

To make it overflow, the content must be larger than the div, not the div itself. and to be able to make it inline, you must use display:inline-block and white-space: nowrap. Let me know if you have concerns.
Check out the fiddle below.
Fiddle
CSS
#div2{
display:inline-block;
white-space: nowrap;
}

Set overflow:hidden; to your parent div and overflow-x: auto; to your child div.

You can simply disable scrolling for the html or body element. Not entirely sure that's what you wish to do, but either that or the #parent element.
html,body{
overflow:hidden;
}
or
#parent{
overflow:hidden;
}
Additionally right now your #div2 is wider than most screens, so you won't get a scroll bar for it likely, so you might be intending to scroll the #parent element?
Additionally it is enough to set the overflow to auto instead of scroll as scroll just forces a scrollbar to be visible even if there is no content to scroll.

using ellipsis with label that is not starting from the div's begining

I have a label that is located inside a dynamically sized div.
the label starts from about the middle of the div
I am trying to add ellipsis to it but I just cant get it to start the ellipsis in the correct place
here is my code:
<div id="container" style="text-overflow: ellipsis;overflow:hidden;width:50px">
<label id="myLabel" style="left: 20px!important;position: absolute;">test1234567890</label></div>
what am I doing wrong?
Thanks

Ellipsis property won't affect absolutely positioned element's, if you want to move label left AND keep ellipsis, you should set padding-left:20px; to div