html page max-width by knowing the size of inside divs

Go To StackoverFlow.com

0

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.

2012-04-04 08:09
by Django Anonymous
so you want the main div to shrink to 600. then what happens next? does the container shrink? does the menu increase in width - Joseph 2012-04-04 08:18
yes i want the div to shrink - Django Anonymous 2012-04-04 08:27
try using min-width:600 instead of width:650Joseph 2012-04-04 08:30
@Joseph, you are unable to understand my css, i would not be able to know the width of 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
you didn't mention it was "auto - Joseph 2012-04-04 08:41
is jQuery an option - Joseph 2012-04-04 08:42
@Joseph yes if it could be done using jquery, i would not be having any problem - Django Anonymous 2012-04-04 08:59


0

https://stackoverflow.com/a/10011466/1182021

Here is the link for the answer... after waiting for long i come up to this.

2012-04-05 11:58
by Django Anonymous


0

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

2012-04-04 08:51
by Saurabh
check this out: i have modified it a bit... an issue if you can fix

http://jsfiddle.net/jqYK6/2 - Django Anonymous 2012-04-04 09:00

i'll try to do that, this will require setting a maximum allowed width for maincontent - Saurabh 2012-04-04 09:09
Ads