Display:table expands the height of the div. Solutions?

Question

I have this html sequence that displays 2 bars. Because inside the first div I display an inline list, I want to use display:table because it looks nicer in this way. The problem is that it extends the div, making it bigger with 20px (and moves the other div lower).

<div class="top-bar></div>
<div class="tail-bar></div>

.top-bar{       
    width: 520px;
    height: 50px;
    dispaly: table;
    background-color: #FFFFFF;  
}

EDIT: I added a JSFiddle http://jsfiddle.net/eCYUT/2/

It is the version without display:table tag

How does it "look nicer that way"? Instead of randomly changing CSS attributes and seeing which one looks best, you should set them to your needs. `display: table` and `display: block` serve different purposes. — Adam Jenkins, Sep 27 '13 at 16:06
give `.stats` class `margin: 0px;`/`margin-bottom: 0px;` property. [fiddle](http://jsfiddle.net/venkateshwar/eCYUT/3/). — Mr_Green, Sep 27 '13 at 16:13
Oh...It workds here but it didn't work in my page, probably it inherits something else. — bogdan.herti, Sep 27 '13 at 16:16
@Mr_Green Firefox 24. As I said, it works with your solution on JSFiddle but not in my page. I have to check why is not working. Anyway, thank you very much. Now I know the cause. You can post the answearto this question just to make this question answered. — bogdan.herti, Sep 27 '13 at 16:19

score 1 · Accepted Answer · answered Sep 27 '13 at 16:22

1

The gap between the ul element and the div element was actually the margin related to the ul element.

To remove it, give margin-bottom: 0px to the class name of the ul element.

ul.stats{
    margin-bottom: 0px;
    /* other css properties */
}

answered Sep 27 '13 at 16:22

Mr_Green

40,727
45
159
271

Display:table expands the height of the div. Solutions?

1 Answers1