Div height to fit its content

Question

I have some css and html code to uniformly separate the buttons (or group of buttons). Justification works great but for some reason the container div .justified height is notably taller than its contents.

Why this happens? I want it to be the same height as the buttons. How can i do it? (I have a jsfiddle that shows my problem equivalent to the following code)

/* Approach based on these two: */
/* http://stackoverflow.com/questions/6865194/ */
/* http://jsfiddle.net/thirtydot/EDp8R/ */
div.justified {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    border: thin solid purple;
}
div.justified > div {
    border: thin solid green;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
div.justified div.spacer {
    width: 1px;
    display: inline-block;
}
div.justified > span.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

<br/>
<br/>
example 1:
<div class='justified'>
    <div>
        <button>button1</button>
    </div>
    <div>
        <button>button2</button>
    </div>
    <span class='stretch'></span>
</div>
example 2:
<div class='justified'>
    <div class='spacer'></div>
    <div>
        <button>button1</button>
    </div>
    <span class='stretch'></span>
</div>

why display:inline-block to span 'stretch'? is it requirement? the issue is due to that only. If you use display: block it will work fine — Kiran Shinde, Aug 03 '15 at 13:10

score 1 · Answer 1 · answered Aug 03 '15 at 13:10

1

The reason this is happening is because of the stretch element. It is creating a new inline line break. The break is causing another line to appear below the content. If you want to get this completely right, try looking into using floats and a clearfix, but a quick fix is to add this:

.justified { font-size: 0; }

answered Aug 03 '15 at 13:10

Matthew R.

4,332
1
24
39

This worked. But in my case `font-size: 0` causes inner buttons font size to be 0 too. I am work-arounding for now. Probably I should check floats and clearfix as you said. – nacho4d Aug 03 '15 at 13:43

Paulie_D · Accepted Answer · 2015-08-03T14:16:20.400

1

Very simple with flexbox, no extra divs or spans.

div.justified {
  border: thin solid purple;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

<div class='justified'>
  <button>button1</button>
  <button>button2</button>
</div>

edited Aug 03 '15 at 14:16

answered Aug 03 '15 at 13:31

Paulie_D

107,962
13
142
161

This looks really compact. It works in Chrome and Firefox but not Safari. I wonder how about IE10 or IE11? – nacho4d Aug 03 '15 at 13:47
I haven't used the prefixed version but Safari 7.1+ supports `flexbox` as do IE10/11- http://caniuse.com/#feat=flexbox – Paulie_D Aug 03 '15 at 13:49
I cannot get this to work in Safari :( . Apparently `display:-webkit-flex;` is not enough – nacho4d Aug 03 '15 at 14:14
1

Added full prefixed versions – Paulie_D Aug 03 '15 at 14:16
Can't believe all the extra vendor lines needed! Thank you very much! – nacho4d Aug 03 '15 at 14:17

score 0 · Answer 3 · answered Aug 03 '15 at 13:10

You have a div arround your button while you should modify your button. The following snipplet shows how I would do it.

/* Based on: */
/* http://stackoverflow.com/questions/6865194/ */
/* http://jsfiddle.net/thirtydot/EDp8R/ */
div.justified {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    border: thin solid purple;
    
}
div.justified > button {
    border: thin solid green;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
div.justified div.spacer {
    width: 1px;
    display: inline-block;
}
div.justified > span.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

<br/>
<br/>
example 1:
<div class='justified'>
        <button>button1</button>
        <button>button2</button>
    <span class='stretch'></span>
</div>
example 2:
<div class='justified'>
    <div class='spacer'></div>
        <button>button1</button>
    <span class='stretch'></span>
</div>

score 0 · Answer 4 · answered Aug 03 '15 at 13:15

0

add this css -

div.justified {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    border: thin solid purple;
    line-height: 0; /* This line */
}

http://jsfiddle.net/usqp2qxf/1/

answered Aug 03 '15 at 13:15

Rohit Kumar

2,048
1
14
28

Div height to fit its content

4 Answers4

Linked