CSS float with border

Question

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?

is it normal? I dont see the html and the css in ur fiddle? – Marc Oct 25 '12 at 12:43 — Marc, Oct 25 '12 at 12:43
Can't you just use a table? Seems like table data to me. – Jasper de Vries Oct 25 '12 at 12:45 — Jasper de Vries, Oct 25 '12 at 12:45

score 3 · Accepted Answer · answered Oct 25 '12 at 12:44

3

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>

answered Oct 25 '12 at 12:44

Mr. Alien

153,751
34
298
278

`overflow: hidden` is another way to clear without extra markup. http://jsfiddle.net/5DNFs/10/ – Maxime Morin Oct 25 '12 at 12:47
1

@MaximeMorin did you read the issues using `overflow: hidden;` http://www.quirksmode.org/css/clearing.html – Mr. Alien Oct 25 '12 at 12:59
Most of these issues have been fixed. No need of width to trigger hasLayout, zoom works. Hidden simply does not show scroll bars. You should definitively read the link I provided on the word `really`. I'm not saying overflow: hidden fixes everything every time. Yes, it has limits. In this case, it's just simpler and have less useless markup. – Maxime Morin Oct 25 '12 at 13:09

score 2 · Answer 2 · answered Oct 25 '12 at 12:44

2

Here it is...

Just add display:inline-block to your div

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

answered Oct 25 '12 at 12:44

udidu

8,269
6
48
68

score 1 · Answer 3 · answered Oct 25 '12 at 12:44

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/

score 0 · Answer 4 · answered Oct 25 '12 at 12:45

0

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.

answered Oct 25 '12 at 12:45

CodePB

1,736
12
19

score 0 · Answer 5 · edited May 23 '17 at 11:48

0

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.

edited May 23 '17 at 11:48

Community

1
1

answered Oct 25 '12 at 12:52

i_like_robots

2,760
2
19
23

CSS float with border

5 Answers5