We Keep Coding

hover one div in a series of similar, show the other

guys. I have several goods with description. I need "tile-description" appear when I hover over a "middle tile". Besides, I need a border around the "large-tile" on hover. Here is the mark-up and some js that I used, but it didn't work for me. Help me, please!
$(".middle-tile").mouseover(function(){
$(this).parent().siblings().css('opacity', 1);
});
$(".middle-tile").mouseout(function(){
$(this).parent().siblings().css('opacity', 0);
});
.tile-description{
position: absolute;
top: 100%;
background-color: white;
z-index: 10;
opacity: 0;
}
<div class="large-tile">
<div class="middle-tile">
<div class="tile-data">
<div class="tile-img"><img src="img/item-2.jpg" alt="" ></div>
<div class="tile-title">Title</div>
</div>
<button class="btn price">3 697</button>
</div>
<div class="tile-description">
<p>Some specs</p>
</div>
</div>

Use find instead of sibling when you use with parent or just sibling without parent as below:
$(this).parent().find('.tile-description').css('opacity', 1);
DEMO
Or
$(this).siblings('.tile-description').css('opacity', 1);
DEMO

Just use as CSS rule:
.middle-tile:hover + .tile-description {
opacity: 1;
}
-DEMO (using transition btw)

How to add `scroll` bar to a `div`, when its height as `auto`

In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution

Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;

http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.

Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/

Can this JS be written in pure CSS?

jQuery('.parent:visible').each(function () {
if (jQuery(this).find('.child-1').is(':hidden')) {
jQuery(this).find('.child-2').css('color', '#000')
}
});
Selecting the children are easy, separately, but since there are no if statements in CSS, I'm hoping there's some magic CSS I'm missing.
edit: fixing js as per suggestions

.parent:not(.hidden) .child-1:not(.hidden) + .child-2 perhaps?
Demo
.parent { border:1px solid red; }
.hidden { display:none; }
.parent:not(.hidden) .child-1:not(.hidden) + .child-2 {
color:green;
}
<div class="parent">
<div class="child-1">one</div>
<div class="child-2">two</div>
</div>
<div class="parent">
<div class="child-1 hidden">one</div>
<div class="child-2">two</div>
</div>
<div class="parent hidden">
<div class="child-1">one</div>
<div class="child-2">two</div>
</div>
<div class="parent">
<div class="child-1">one</div>
<div class="child-2">two</div>
</div>

If you can add classes to the elements based on their visibility, then you can do this.
.parent.visible .child-1.not-visible + .child-2 {
color: #000
}
This will check if a .child-1 inside a .parent.visible has a class of .not-visible -- if it does, then the adjacent sibling with a class .child-2 will inherit this rule.
Otherwise, you have to use JavaScript as CSS doesn't have a way to test if an element is visible or not.

positioning 3 divs in a div

i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.

As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this

use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).

How to lock height of two divs together?

I need to create two divs with same height. The height of each div is different on every page (height depends on content). Is there any way how to lock the height of two divs together? Here is a jsfiddle (I need to increse the height of div C based on div A and conversely).
Note: I cant use table or parent div. I am a newbie in JavaScript, so I hope that it can be done without it.
<div class="a">
<brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
</div>
<div class="b">
dsdds
</div>
<div class="c">
dsdds
</div>

You can use display:table-cell, first remove the float and add this:
div {
width 30px;
display:table-cell;/*Add this*/
/*float:left; Remove this*/
}
Check this Demo http://jsfiddle.net/8zPD2/1/
Before use this check the Compatibility

Just need to use this CSS:
.a,
.c {
max-height: 200px;
}

try this:
<div class="divmaster">
<div class="divchild">
<brdsds><br><br><br><bdsdsr><br><br><br>ds<br>dsds<br>dsd
</div>
<div class="divchild">
dsdds
</div>
<div class="divchild">
dsdds
</div>
and the css:
.divmaster{
display:table;
}
.divChild{
height: 100%;
}

If you want to try this in JavaScript , Use this code:
DEMO
$(function(){
setHeight = function (src, target) {
h = src.height();
target.css('height', h + 'px');
}
content = $('.a');
imagediv = $('.b');
setHeight(content, imagediv);
});

Just set your div to display: table-cell, and then remove the float: left.
CSS
div {
display: table-cell;
width 30px;
}
.a {
background-color: #e9d8b7;
}
.b {
background-color:blue;
}
Check this: http://jsfiddle.net/8zPD2/6/

Set min height to height of the div which has high height. Say if your div A has highest height the use that height to all divs. Its not possible with css if you dont know which div might have heigest div. As you asked how to do it only with css here it is
.a,.b,.c{ min-height:200px; max-height:400px; }