CODEWITHSUNDEEP
css
user1876234
user1876234

Reputation: 857

Fill empty space last div

I have 4 divs in main div. All are floating left, the last one leaves an empty space. I want to fill that space with last div (full width).

http://jsfiddle.net/jZpWf/26/

<div id="container">
    <div class="col1">
    </div>
    <div class="col2">
    </div>
    <div class="col3">
    </div>    
    <div class="col4">
    </div>    
</div>

#container {
    width: 600px;
    height: 200px;
    background:yellow;
}
.col1 {
    float:left;
    width:90px;
    height: 200px;
    background:red;
}
.col2 {
    float:left;
    width:130px;
    background:blue;
height: 200px;    
}
.col3 {
    float:left;
    width:130px;
    background:red;
    height: 200px;
}
.col4 {
    float:left;
    width:130px;
    background:blue;
    height: 200px;
}

Upvotes: 1

Views: 9786

Answers (3)

Witalo Da Luz Rebou&#231;as
Witalo Da Luz Rebou&#231;as

Reputation: 95

the sum of the widths of the divs do not correspond to the total size available, so do not occupy the total area, this can be done using the percentage method or the CSS3 calc

Resize .col4

.col4 {
    float:left;
    width:250px;
    background:blue;
    height: 200px;
}

or

Calc Col4 with CSS3

.col4 {
    float:left;
    width: calc(100% - 350px);
    background:blue;
    height: 200px;
}

Upvotes: 0

Rok Burgar
Rok Burgar

Reputation: 949

Just don't float it left and make it 100% it will fill all the remaining space.

.col4 {
    background:blue;
    height: 200px;
}

Try DEMO

Upvotes: 4

Dan
Dan

Reputation: 3815

.col4 {
    float:left;
    width: 250px;
    background:blue;
    height: 200px;
}

Simple answer, better one soon...

better one, jfiddle

Upvotes: 1

Related Questions