Div sidebars do not expand with content of the center column

Question

I've got a webpage that I'm working on that when there's no content in the middle it looks fantastic. The problem came recently when I attempted to add content to the center column. I'm adding a table that contains a long list of questions that people have to answer. The problem is that when this content gets larger than the window size it scrolls down for the content but the sidebars remain the same size.

I've attached my code below on jsfiddle. Any help would be appreciated. :)

http://jsfiddle.net/qp5Zk/3/1

@charset"utf-8";
html, body {
width: 100%; /* IE6 Hacks */
height: 100%; /* IE6 Hacks */
margin: 0;
padding: 0;
}
body {
background-color: green;
background-repeat: repeat;
height: 100%;
}
#content_wrapper {
margin: 0 auto; /* Center it on the page */
width: 93%;
height: 100%;
}
#center_column {
margin: 0 14px 0 14px; /* 0 Right Column 0 Left Column */
background-color: #FFF;
height: 100%;
}
#left_column, #right_column {
width: 14px;
height: 100%;
}
#left_column {
float: left;
background-color: pink;
}
#right_column {
float: right;
background-color: orange;
}
#header_top {
width: 100%;
height: 14px;
background-color: #EEE;
}
#header_top_grad {
width: 100%;
height: 14px;
background-color: blue;
background-repeat: repeat-x;
}
#header_middle {
height: 40px;
width: 100%;
background-color: yellow;
background-repeat: repeat-x;
}
#header_bottom {
background-color: blue;
background-repeat: repeat-x;
height: 14px;
width: 100%;
}
#logo {
width: 100%;
background-color: #EEE;
}
#logo img {
width: 253px;
height: 47px;
margin: 10px 0 10px 20px;
} 
#main_table {
color: #696969;
font-size: small;
width: 90%;
margin: 0 auto;
border-spacing: 0;
border: 0; 
/* IE border-spacing workaround */
border-collapse: collapse;
}
#main_table td {
/* Padding between each question */
padding-bottom: 20px;
}
.q_column, .r_column, .e_column {
background-color: #FFF;
}
.q_column {
font-weight: bold;
text-align: right;
/* Padding between question and response column */
padding-right: 10px;
}
.red {
color: #F00;
font-size: large;
}
 .text_field {
border: 1px solid;
border-collapse: collapse;
border-color: #BBB;
color: #000;
}
.small_text {
font-size: smaller;
}
.r_column {
width: 35%;
}
.e_column {
width: 25%;
}

I have unsuccessfully attempted clearfix but may be doing something wrong or it may not even be the right solution.

My bad when I was talking about side bars I mean the left and right columns. @snowp That did fix the center column adjustments but it blew up the left and right columns. — user2151158, Mar 09 '13 at 20:13
still its unclear to understand but check this fiddle http://jsfiddle.net/krish/qp5Zk/6/ — Krish, Mar 10 '13 at 05:41
@krish I appreciate your help so far. That does get the context in line but it obliterates the floating divs. If you look in the original fiddle it has pink and orange bars on the side and then a white middle space with text. The text continues down past the original page size and the pink and orange divs don't follow. I can't seem to get the pink and orange bars to dynamically move down to the new bottom of the page. — user2151158, Mar 10 '13 at 06:31
In hopes to give you a better idea of what I'm having trouble with I've hosted the page here: http://network-junkies.com/take2/ You can see the bars on each side just stop after you scroll down. — user2151158, Mar 10 '13 at 06:47

score 0 · Answer 1 · answered Mar 09 '13 at 09:58

0

@user2151158 Set Minimum height like this for Content class

#content_wrapper {
    margin: 0 auto; /* Center it on the page */
    width: 93%;
    min-height: 100%;
}

answered Mar 09 '13 at 09:58

snowp

495
1
6
22

score 0 · Answer 2 · answered Mar 10 '13 at 12:12

Try This fiddle: http://jsfiddle.net/krish/qp5Zk/7/

I changed the center_coloum as relative and put the right and left column to absolute the changed details are shown below.

Changed Css

    #center_column {
    margin: 0 14px 0 14px; /* 0 Right Column 0 Left Column */
    background-color: #FFF;
    height: 100%;
    position:relative; /*added*/
    }

    #left_column 
    {
    /* removed float: left; */
    background-color: pink;
    position:absolute; /*added*/
    left:0px; /*added*/
    }

    #right_column {
    /*removed float:right*/
    background-color: orange;
    position:absolute; /*added*/
    right:0px; /*added*/
    }

Div sidebars do not expand with content of the center column

2 Answers2