We Keep Coding

body width 100% after adding dynamic content

I am giving body height 100% by using this code:-
<div class="container" id="container" style="background-color:#FAFAFA;">
<div class=" span5 fill">
</div>
</div>
And css is:-
.fill{
height:100%;
min-height:100%;
}
.container{
height:100%;
min-height:100%;
}
But when i am adding dynamic content in 'fill' div, then content not in 100% body tag.

I noticed you tagged jQuery so here is a simple function that you can use to set the height dynamically. It also changes based on the browser resizing.
Fiddle:
http://jsfiddle.net/xfnyzcos/
jQuery Code:
function setHeight(){
var winHeight = $(window).innerHeight();
$(".container").css("height", winHeight + "px");
$(".fill").css("height", winHeight + "px");
}
$( window ).resize(function() {
setHeight();
});
setHeight();

Scrollable div with Variable Height

I want my sidebar to have a scrollable div. But it cant have a fixed height. How can I make it scrollable without setting a fixed height?
I tried with this, doesn't work properly.
.sidebar {width:300px; padding:10px; background:#efefef;height:100%; position:fixed}
.scroll-widget {overflow-y: scroll;padding:10px;margin:10px; background:#fffeee; height:inherit}
-
<div class=sidebar>
...
<div class=scroll-widget>
...
</div>
</div>
Demo: http://jsfiddle.net/YK47P
Jquery alternative is also fine with me. But i am a beginner, so please be kind

Somehow I was able to make it work using jQuery and taking help from here.
$(function () { // window load
$(window).resize(function () {
var sidebarH = $('.sidebar').height();
var scrollH = $('.top').height();
$('.scroll-widget').height(sidebarH - scrollH);
}).resize();
});
DEMO : http://jsfiddle.net/YK47P/40/

You just need to add overflow: scroll to your sidebar:
.sidebar {
width:300px;
padding:10px;
background:#efefef;
height:100%;
position:fixed;
overflow: scroll;
}
Updated Fiddle

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; }

Missing pixels & body stops centering when resizing jquery

I'm facing some problems with this code. I thought may be you could help me.
First of all, my sections have no padding and no border so the pixels are used only for top, left, right and width properties
and there is no need for outerWidth().
First problem:
In the beginning I set the body 'left' and 'right' property at (window_width - 1100 = 180) so my body width
is 920px.
The thing is it's not. It turns to be 904. I've tested it with chrome and mozilla.
I don't know where the 16 missing pixels are.
Second:
I want my body to be centered when I resize the window and my margins to grow less until body occupies the whole
window.
My body doesn't remain centered, plus only one of the margins grows less.
I found out this is happening because '#content', '#mainContent', 'aside' have a width. I kinda' need that width to be set.
Is there any way I can make my window center itself with jquery and do all the stuff above?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body{
position:absolute;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;
window_h = $(window).height();
window_w = $(window).width();
top = window_h - (window_h - 100);
left_right = window_w - 1100;
content_w = window_w - 2*left_right;
$('#content').css('width', content_w);
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
resize_body(top, left_right, left_right);
//next three lines are written only for demonstration purpose
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
alert('body width: '+$('body').css('width'));//it supposed to be 920
alert('left propery value: '+left_right);//it supposed to be 180
$(window).resize(function(){
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
resize_body(top, left_right, left_right);
});
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>

Reset browser style:
html, body {
margin: 0 auto;
padding: 0;
}

jQuery : Resizing the layouts

I want re-sizable feature like jsFiddle : link. If i explain in my own words there are four layouts
[1. HTML, 2. javascript, 3. CSS & 4.Result] and we can re-size the layout inwards & outwards. I have been tried to make resizable using jQuery but failed to do like jsFiddle.
my example: CSS
#parent { position:relative; width 100%; height:100%;}
#left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
#right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
<div id = "parent">
<div class="resize" id = "left"> </div>
<div class="resize" id = "right"> </div>
</div>
js: $(function() { $('.resize').resizable( { handlers: 'n,e,s,w' } );
});
in example, there are two layout left & right, are equals in size. when i resize any div then other div should change it's size too but it doesn't make any difference in size while jsFiddle does.

Add the jQuery css in your code and it will be working fine.
add this line:
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
**Editing**:: Use this one: It will work for left div. try this :)
/*my example: CSS */
#parent { position:relative; width 100%; height:100%;}
#left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
#right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
/*my example: JS */
jQuery(function() {
jQuery('#left').resizable({
resize: function(event, ui) {
var leftWidth = ( 100 * parseFloat($('#left').css('width')) / parseFloat($('#left').parent().css('width')) );
var rigthWidth = 100 - leftWidth - 4;//4 is ur distance between two divs
jQuery('#right').css('width', rigthWidth + '%');
}
});
});
<div id = "parent">
<div class="resize" id = "left"> </div>
<div class="resize" id = "right"> </div>
</div>