•  02-04-2022
  •  | 
  •  

Question

I am trying to set up a border layout with top, left, center, right, bottom. I have seen a few examples and tried them, but none of them seem to work. The main problem is with the left, center, and right columns. I can only get two divs aligned horizontally, the third always falls below the footer. I need this to be resizable. Preferably the center pane will fill the full until the borders.

I have tried float left and float right but it didn't make a difference.

This is what I have tried so far. http://jsfiddle.net/xQVWs/2/

<body>
<div class="top-wrapper">
    <div class="content-wrapper">
        <header>
            header
        </header>
    </div>
</div>

<div class="mid-section">
    <div class="left-wrapper">
        Left Pane
    </div>
    <div class="main-content">
        Main pane
    </div>
    <div class="right-wrapper">
        right pane
    </div>
</div>

<div class="bottom-wrapper">
    <div class="content-wrapper">
        footer
    </div>
</div>

</body>
Was it helpful?

Solution

You could use float:left on the first two middle columns and a float:right on the third. I would put an overflow:hidden on the wrapper for the middle columns.

http://jsfiddle.net/zer6N/1/

.mid-section
{
    background-color: blue;
    width: 100%;
    height:1000px;
    overflow:hidden;
}

.left-wrapper, .right-wrapper {
    background: #ffff00;
    height: 100%;
    min-height: 100%;
    width: 21%;
    display:block;
    float:left;
    margin:0;
}

.right-wrapper {
    background:#efefef;
    float:right;
}

.main-content {
    background-color: black;
    width: 58%;
    height: 100%;
    margin:0;
    float:left;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top