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

Question

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.

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, Apr 04 '12 at 08:18
@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, Apr 04 '12 at 08:40
@Joseph yes if it could be done using jquery, i would not be having any problem. — Django Anonymous, Apr 04 '12 at 08:59

Saurabh Kumar · Answer 1 · 2012-04-04T08:59:56.870

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

edited Apr 04 '12 at 08:59

answered Apr 04 '12 at 08:51

Saurabh Kumar

5,576
4
21
30

check this out: i have modified it a bit... an issue if you can fix http://jsfiddle.net/jqYK6/2/ – Django Anonymous Apr 04 '12 at 09:00
i'll try to do that, this will require setting a maximum allowed width for `maincontent`. – Saurabh Kumar Apr 04 '12 at 09:09

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

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

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

edited May 23 '17 at 12:04

Community

1
1

answered Apr 05 '12 at 11:58

Django Anonymous

2,987
16
58
106

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

2 Answers2