Float right and fill parent

Question

When an element is floated right in a relatively positioned element, how do I make the height fill the parent element? ```

``` ``` #page { width: 980px; padding: 10px; background: #3C4B76; display: block; margin: 10px auto auto auto; position: relative; } #left { padding: 0; margin: 0; width: 230px; float: left; } #right { float: right; width: 720px; border-left: 1px solid white; padding: 5px 5px 5px 20px; height: 100%; position: relative; display: block; } ``` In this example the `#right` element does not fill the '#page' element, it just grows to as big as the contents. If it is smaller than `#page` I want `#right` to fill the parent.

Accepted Answer

Try this for the parent:

```
overflow:auto; 
```

Another solution:

parent:

```
display: table;
```

child:

```
display: table-row;
```

Check this fiddle

UPDATE: To set equal height columns with Cross-Browser CSS you should read this Matthew James post

Float right and fill parent

Solution

Problem