Div breaking the size of the div beside

Question

I have a screen that contains 4 divs, divs these are resizable on the monitor screen until a certain point, as you can see in this link

All I'm trying to do is get a way to put the div Main D beside of Main B and Main C, I tried to put the float: left; with a width of 100% encompassing these two divs, but it did not work.

If I remove the width of 100%, the Main D go to left, but changes the original size of the divs (Main B, Main C), and this is becoming a big problem, how can I solve this?

Answer 1

Try this:

HTML:

 <div id="topo">
        <br>
        <br>Main A
    </div>
    <div id="menu-holder">
        <div id="Menu_B">
            <br>
            <br>Menu B</div>
        <div id="Menu_C">
            <br>
            <br>Menu C
        </div>
    </div>
    <div id="Feed">
        <br>
        <br>Main D
    </div>

CSS:

#topo {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    height: 10%;
    max-height: 1080px;
    max-width: 1920px;
    min-height: 86px;
    min-width: 839px;
    position: relative;
    text-align: center;
    width: 100%;
}

#menu-holder {
    float: left;
    max-width: 768px; /* 40% of 1920 max-width of topo*/
    min-width: 335px;  /* 40% of 839 min-width of topo*/
    width: 40%;
}

#Menu_B {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    height: 40%;
    margin-top: 5px;
    max-height: 428px;
    max-width: 764px; 
    min-height: 290px;
    min-width: 337px;
    position: relative;
    text-align: center;
    width: 100%;
}

#Menu_C {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    height: 48%;
    margin-top: 5px;
    max-height: 513px;
    max-width: 764px;
    min-height: 320px;
    min-width: 337px;
    position: relative;
    text-align: center;
    width: 100%;
}

#Feed {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    float: left;
    height: 87.2%;
    margin-left: 5px;
    margin-top: 5px;
    max-height: 944px;
    max-width: 1142px;
    min-height: 678px;
    min-width: 502px;
    position: relative;
    text-align: center;
    width: 58.5%;
}

Answer 2

http://jsfiddle.net/fHZRD/

This works, you have to move the D above the other two, remove the width:100% from the container on B and C, and float the D right instead.

They will not scale down unless you add a container around all three of them with

style="width:100%;display:block;min-width:860px;height:100%;"

so that once the veiwport hits the min-width they stay that wide rather than squishing each other out. The max-width on D will cause a white space but I'm not sure if that's intended.

Here it is with that update

http://jsfiddle.net/R5DWF/

Answer 3

Is this what you're trying to do? http://jsfiddle.net/r5vsb/1/

Wrap Menu B and Menu C in a div and float it:

HTML

<div id="topo" style="">
    <br>
    <br>Main A</div>
<div id="sidebar">
    <div id="Menu_B" style="">
        <br>
        <br>Menu B</div>
    <div id="Menu_C" style=" ">
        <br>
        <br>Menu C</div>
</div>
<div id="main-content">
    <div id="Feed" style="">
        <br>
        <br>Main D</div>
</div>

css

#topo {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    height:10%;
    width:100%;
    border-radius:5px;
    position: relative;
    min-width:839px;
    min-height:86px;
    max-width:1920px;
    max-height:1080px;
}
#sidebar {
    width:40%;
    max-width:764px;
    min-width:337px;
    float:left;
}
#main-content {
    width:60%;
    min-width:500px;
    float:left;
}
#Menu_B {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    max-height:428px;
    min-height:290px;
    height:40%;
    border-radius:5px;
    position: relative;
    margin-top:5px;
}
#Menu_C {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    max-height:513px;
    min-height:320px;
    height:48%;
    border-radius:5px;
    position: relative;
    margin-top:5px;
}
#Feed {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    border-radius:5px;
    position: relative;
    margin-top:5px;
    margin-left:5px;
    height:500px;
}

(I extracted your inline CSS to make it easier to read).

Answer 4

I know what you're trying to do, but you can not do it without actually going beyond limitations of CSS. I've done it before, and it involved more hassle than it was worth. Position divs next to each other with float: left is dead simple, yes, but you can not have 2 float left divs next to a floated left div with a width of 100%.

There are several methods, and most of them involve whipping out a good ol' fashioned calculator and do some number crunching. Just find the maximum width of divs B and C (as well as their padding and margins) and then in your CSS, take that number and change the width from 100% to:

width: calc(100% - x);

Assuming x is that number you got. This may or may not work, depending on your understanding of how margins and paddings work in CSS. If they don't have paddings or margins (or even borders for that matter), than getting x is easy. If you can find it, just plug and chug numbers in there.

Your next best bet is jquery, because jquery is an end all, be all solution to most problems that CSS can't solve. All you need to do is use a script like this:

function widthSetter(divB, divC) {
    var getWindow = $(window).width();
    var getB = $(divB).width();
    var getC = $(divC).width();
    var widthBC = getB + getC;
    var getD = getWindow - widthBC;

    $(divD).css("width", getD)
}
$(document).ready(function(){
    widthSetter(divB, divC);
    $(window).resize(function(){widthSetter(divB, divC)});
});

Granted you understand basic jquery, just be sure to plug in the div names where they need to be and you'll be good to go.