css three column layout
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>
1 answers
solution1
1 ACCPTED 2013-04-07 20:37:47
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.
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.