This is my HTML code
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
This is my CSS
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
Now i want to make few div
inside mainContent
of fixed size lets say 150px
however if the mainContent
width became, lets say 650px
then i'll be having 4 div
in a row then again 4 in a row. So 4 div
means it will be of 600px
, hence i'll be having an extra 50px
of space.
Now finally what exactly i want to do is to detect this empty space and making the mainContent
max-width
to 600px`. Any trick which can do this. Javascript or something.
min-width:600
instead of width:650
Joseph 2012-04-04 08:30
mainContent
as it would be auto generated. So how would i be able to detect it in live mode? - Django Anonymous 2012-04-04 08:40
https://stackoverflow.com/a/10011466/1182021
Here is the link for the answer... after waiting for long i come up to this.
Here is the solution using jquery:
$(function(){
var outerdiv = $('.mainContent');
var innerdivs = $('.mainContent > div');
var sum =0;
innerdivs.each(function(index){
sum += $(this).width(); //calculate and add the widths of every div
});
//outerdiv.width(sum); //set new width for .maincontent
outerdiv.css("max-width", sum); //you can also set max-width like this.
});
You can check out the jsfiddle for this here: http://jsfiddle.net/jqYK6/
Regards,
Saurabh
http://jsfiddle.net/jqYK6/2 - Django Anonymous 2012-04-04 09:00
maincontent
- Saurabh 2012-04-04 09:09