CODEWITHSUNDEEP
csscss-float
JonoB
JonoB

Reputation: 5887

CSS float with border

I have a div that I would like to have a border and background-color, but the container has collapsed because everything is floated.

This can be see at http://jsfiddle.net/5DNFs/

How do I get the <div class="due-total"> to have the border and background-color?

Upvotes: 0

Views: 99

Answers (5)

i_like_robots
i_like_robots

Reputation: 2787

You need to force a new formatting context or use a non-floating element to clear the floats (AKA. clearfix) .

But it looks like you should be using a table for this data anyway.

Upvotes: 0

CodePB
CodePB

Reputation: 1756

Try adding overflow to each of the floated containers:

overflow: auto

This solves the collapsing issue. It looks to me like your styling is wrong too with the floats. Clearing floats will help too.

Upvotes: 0

Riz
Riz

Reputation: 10246

You can add div as child of due-total, here is the example:

.invoice-totals .due-total > div {
    border: 1px solid #DDD;
    background-color: #CCC;
    padding: 5px;   
}​

Alternative:

.invoice-totals .due-total {
    float: left;
    border: 1px solid #DDD;
    background-color: #CCC;
    padding: 5px;   
}​

http://jsfiddle.net/5DNFs/3/

http://jsfiddle.net/5DNFs/9/

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

Clear your floats : My Fiddle

Note: Just changed border color so that you can see, you can change it to whatever you want

HTML

<div class="invoice-totals">   
    <div class="total">
        <div class="label">TOTAL</div>
        <div class="value">133.00</div>
    </div>

    <div class="paid-total">
        <div class="label">Payments</div>
        <div class="value">0.00</div>
         <div style="clear: both;"></div>
    </div>

    <div class="due-total">
        <div class="label">AMOUNT DUE</div>
        <div class="value">133.00</div>
         <div style="clear: both;"></div>
    </div>
</div>

Upvotes: 3

udidu
udidu

Reputation: 8588

Here it is...

Just add display:inline-block to your div

http://jsfiddle.net/5DNFs/5/

Upvotes: 2

Related Questions