0

i am having a problem with one issue. Inside main div i have 3 more divs. One to left one (divider) on the middle and one on the right. This is for my wp widget that's why i cant use px to add that divider height because if widget uses more posts than the set height of divider than it would be shown only on the half. What i need is to set this divider to 100% . So if main box is 100% ( main box isnt set by height) then divider would be the same 100%.

Here is an Example

HTML:

<div id="blue_box">
    <div id="left">Foo</div>
    <div id="divider"></div>
    <div id="right">Bar</div>
</div>

CSS:

#divider {
    height:100px;
    width: 5px;
    background-color:white;
    float:left;
    margin:0px;
}
#left {
    position: relative;
    float: left;
    width: 40%;
    margin: 0;
    padding: 0;
    height:400px;
    background-color:red;
}
#right {
    position: relative;
    float: right;
    width: 40%;
    margin: 0;
    padding: 0;
    height:400px;
    background-color:red;
}
#blue_box {
    background-color:blue;
    border-radius: 10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
    position: relative;
    width: 100%;
    min-width: 400px;
    max-width: 600px;
    padding: 2%;
    height:100%;
    overflow: auto;
    /*needed so that div stretches with child divs*/
}

white line is for example that line i want to stretch 100%

I tried many solutions find here, but it just wont work.

Banana
  • 7,424
  • 3
  • 22
  • 43
Fernando Robson
  • 1
  • 2

1 Answers1

0

I think the issues are that that the divider element has float: left, and it cannot inherit the height of <div id="blue_box"> because elements with float cannot inherit heights from other elements. As per the answer in that link, you might be able to use position: absolute on these elements in order to fix your issue.

Community
  • 1
  • 1
alex
  • 6,818
  • 9
  • 52
  • 103