Question

I apologize if the question isn’t phrased correctly or clear. Let me explain.

I have 4 divs inside the middle div. Is meant to look like below:

 --------------  -----------   -------------
|custExpBox    || techSumBox| |escalationBox|
 -------------  |           |  -------------
 -------------- |           |
|workaroundnBox||           |
 -------------   -----------

But instead i get:

 -------------   -----------   -------------
|custExpBox    || techSumBox| |escalationBox|
 -------------  |           |  -------------
                |           |
                |           |
 -------------  -----------
|workaroundBox|
 -------------

Here’s a stripped down version of html code code:

<div id="middle">
    <div id="custExpBox"></div>          
    <div id="techSumBox">  </div>
    <div id="escalationBox"> </div>
    <div id="workaroundBox"> </div>
</div>

CSS code:

#middle{

    width:100%;
    margin-top:16px;
    margin-bottom: 5px;
    display:inline-block;
    border:1px dashed black;
}

#custExpBox{

    display: inline-block;
    float:left;
    width:40%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:3px;
    height:200px;
    overflow:scroll;

}

#techSumBox{

    display: inline-block;
    float:left;
    width:30%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:4px;
    height:406px;
    overflow:scroll;
    border:1px solid black;
    overflow:auto;
}

#escalationBox{

    margin-top:16px;
    display: inline-block;
    float:right; 
    width:18%;
    border:1px solid black;
    background-color:#E9EBA9;
    line-height:17px;
    border-radius:5px;  
    padding:4px;
}

#workaroundBox{
   display: inline-block;
   float:left;
   width:40%;
   background-color:#EAF2D3;
   line-height:17px;
   padding:3px;
   height:198px;
   overflow:scroll;
   margin-top:6px;  
}

Appreciate the help. thanks!

EDIT 1:
Thought I’d let you know that if I change the height of techSumBox div to the same size as custExpBox it appears as desired. The issue is when the height is greater than the custExpBox div.

Answer 1

EDIT 1

This solution does not require a wrapper div. Maybe this will work better for you.

The HTML just needs to be rearranged and the CSS updated.

HTML

<div id="middle">
    <div id="escalationBox">escalationBox</div>
    <div id="custExpBox">custExpBox</div>
    <div id="workaroundBox">workaroundBox</div>    
    <div id="techSumBox">techSumBox</div>
</div>​

CSS

#middle{

    width:100%;
    margin-top:16px;
    margin-bottom: 5px;
    display:inline-block;
    border:1px dashed black;
}

#custExpBox{

    display: inline-block;
    float:left;
    width:40%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:3px;
    height:50px;
    overflow:scroll;

}

#techSumBox{

    width:30%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:4px;
    height:300px;
    overflow:scroll;
    border:1px solid black;
    overflow:auto;
}


#escalationBox{

    margin-top:16px;
    float:right;
    width:18%;
    border:1px solid black;
    background-color:#E9EBA9;
    line-height:17px;
    border-radius:5px;  
    padding:4px;
}

#workaroundBox{
   display: inline-block;
   float:left;
   clear:left;
   width:40%;
   background-color:#EAF2D3;
   line-height:17px;
   padding:3px;
   height:198px;
   overflow:scroll;
   margin-top:6px;  
}​

EDIT 0

This updated example resembles your ascii example. The two left divs just required width:100%; to span the entired left div container.

---

If you combine the two divs on the left you can obtain the desired result. Example here: http://jsfiddle.net/HFPF9/.

So, a new div containing the two left divs:

HTML

<div id="Left">
    <div id="custExpBox">custExpBox</div>          
    <div id="workaroundBox">workaroundBox </div>        
</div>

CSS

#Left {
    float:left;
    width:40%;
}

Then workaroundBox will need to clear: left; in order to stack correctly.

All Code

HTML

<div id="middle">
    <div id="custworkHolder">
        <div id="custExpBox">1</div>
         <div id="workaroundBox">2</div> 
    </div>
    <div id="techSumBox">3</div>
    <div id="escalationBox">4</div>
</div>​

CSS

#middle{
    width:100%;
    margin-top:16px;
    margin-bottom: 5px;
    display:inline-block;
    border:1px dashed black;
}

#Left {
    float:left;
    width:40%;
}

#custExpBox{
    display: inline-block;
    float:left;
    width:100%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:3px;
    height:200px;
    overflow:scroll;
}


#techSumBox{
    display: inline-block;
    float:left;
    width:30%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:4px;
    height:406px;
    overflow:scroll;
    border:1px solid black;
    overflow:auto;
}


#escalationBox{

    margin-top:0px;
    display: inline-block;
    float:right; 
    width:25%;
    border:1px solid black;
    background-color:#E9EBA9;
    line-height:17px;
    border-radius:5px;  
    padding:4px;
}

#workaroundBox{
   display: inline-block;
   float:left;
   clear: left;
   width:100%;
   background-color:#EAF2D3;
   line-height:17px;
   padding:3px;
   height:198px;
   overflow:scroll;
   margin-top:6px;  
}​