Question

I am trying to make a 3 column layout webpage with percentage wrapper width, fixed (pixels) left and right side width and a varying middle column width but i cannot get it to work for the middle column. Here is the source:

html

<aside class="left">
    <span>Categories</span>


</aside>

<section>
    <span>Main</span>

</section>

<aside class="right">
    <span>Test</span>

</aside>

css

* {
    margin: 0px;
    padding: 0px;

}

html, body {
    height: 100%;
    width: 100%;

}

.container {

    height: 100%;
    width: 100%;

}

.container > aside.left {
    float: left;
    width: 197px;
    border-right: black dashed 3px;

}

.container > section {
    float: left;
    width: auto;


}

.container > aside.right {
    float: left;
    background-color: #005f98;
    width: 200px;

}

Answer 1

Have you looked at the flexible box model? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/