Question

I am trying to get the following layout, im using StackLayout framework

I am not able to get the Box1, Box2 and Box 3 stacked.

Also, the header of each box is giving me trouble, when i wrap them in divs.

Here is the code i have so far:

 <div class="wrapper"> 
            <div id="column1" class="stack3of4"> 
                <div class="stackContent">
                    <h2>Heading</h2>
                </div>

            </div>

            <div id="column2" class="stack1of4">
                <div id="box1" class="stackContent">
                    <h2>Box 1 Heading</h2>
                </div>
                <div id="box2" class="stackContent">
                    <h2>Box 2 Heading</h2>
                </div>    
                <div id="box3" class="stackContent">
                    <h2>Box 3 Heading</h2>
                </div> 
            </div>
 </div>

Here is the CSS

.stackContent {
        display: block;
        letter-spacing: normal;
        text-align: left;
        word-spacing: normal;
     }

    .stack3of4 {
        width: 75%;
    }

    .stack1of4 {
        width: 25%;
    }

Answer 1

Didn’t use StackLayout before, but i tried to create a fiddle which is almost what you want: http://jsfiddle.net/alp82/3Hy5p/

I think the only problem is that the height of both columns is not the same.

Update

Here is the HTML markup:

<div id="page">
    <div class="stack">
        <div id="header">
        </div>
        <div id="content">
            <div id="column1" class="stack3of4">
                <div id="main" class="stackContent">
                    <h2>Heading</h2>
                </div>
            </div>
            <div id="column2" class="stack1of4">
                <div id="box1" class="stackContent">
                    <h2>Box 1 Heading</h2>
                </div>
                <div id="box2" class="stackContent">
                    <h2>Box 2 Heading</h2>
                </div>    
                <div id="box3" class="stackContent">
                    <h2>Box 3 Heading</h2>
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </div>
</div>