Two divs, one fixed width, the other, the rest

user_114865 0
Viewed 97355

I've got two div containers.

Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

css html
10 Answers

If you need a cross browser solution, you can use my approach, clear and easy.

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}
Admin1
Related