Make right and left cells occupy minimum widths to display their contents?

Question

I have some html as given in code below.

I am using display:table and display:table-cell for laying out the divs in a table-like manner without using html table. This works fine except that the widths of left and right cells are much bigger than the width of their contents.

A demo for this question is at following URL: http://js.do/sun21170/87371

Question: What CSS I can use to make the left and right cells automatically resize to their contents? I do not want to specify the widths of these cells.

I tried to solve this problem by setting the center div width to 100% which did what I was after but then the margins of left and right divs are not respected. So may be there is a better solution that I am missing!

HTML Markup

<script></script>
<style>
    #rgcmd {
    width:100%;
    display:table;
    position:relative;
    border:solid 1px green;
    }
    .leftCell {
    margin-right: 5px;
    height:100%;
    display:table-cell;
    vertical-align:middle;
    border-right:solid 1px red;
    }
    .rightCell {
    margin-left: 
    5px;height:100%;
    display:table-cell;
    vertical-align:middle;
    border-left:solid 1px red;
    text-align:right;
    }
</style>
<div id="rgcmd">
    <div class="leftCell"><a href="#" onclick="alert('Go Left');">Go Left</a></div>
    <div style="display:table-cell; vertical-align:top;">
        <span id="status">Your status is offline</span>
    </div>
    <div class="rightCell"><a href="#" onclick="alert('Go Right');">Go Right</a></div>
</div>

Although `white-space: nowrap` as suggested in Hatchet’s answer mirk work under these specific conditions – it might not always be the solution, those outer columns might contain more than one single line of text. Flexbox would solve this quite easily and gracefully. — CBroe, Mar 15 '16 at 20:10
I tried the suggested answer but it doesn't solve my problem since margins for left and right cells still do not apply. It's not much different from the solution I tried of setting center div to 100% width. — Sunil, Mar 15 '16 at 20:13
There's a great solution [here](http://stackoverflow.com/questions/10272605/align-two-inline-blocks-left-and-right-on-same-line). I have implemented this solution to your [code](http://js.do/code/87378). — Anthony, Mar 15 '16 at 20:24

Hatchet · Accepted Answer · 2016-03-15T20:12:25.870

1

Add white-space: nowrap to the left and right cells and width: 100% to the center cell:

#rgcmd {
  width: 100%;
  display: table;
  position: relative;
  border: solid 1px green;
}
.leftCell {
  padding-right: 5px;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  border-right: solid 1px red;
  white-space: nowrap;
}
.rightCell {
  padding-left: 5px;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  border-left: solid 1px red;
  text-align: right;
  white-space: nowrap;
}
.centerCell {
  width: 100%;
  display: table-cell;
  vertical-align: top;
}

<div id="rgcmd">
  <div class="leftCell"><a href="#" onclick="alert('Go Left');">Go Left</a>
  </div>
  <div class="centerCell">
    <span id="status">Your status is offline</span>
  </div>
  <div class="rightCell"><a href="#" onclick="alert('Go Right');">Go Right</a>
  </div>
</div>

edited Mar 15 '16 at 20:12

answered Mar 15 '16 at 20:05

Hatchet

5,320
1
30
42

I tried your solution and found that the margins for left and right cells are still not being respected. I would like those margins to apply as I explained in my post. – Sunil Mar 15 '16 at 20:09
@Oriol, The margins are still not being applied for left and right cells. – Sunil Mar 15 '16 at 20:11
@Sunil Works if you change the margin to padding, see edit – Hatchet Mar 15 '16 at 20:13
@Hatchet, Yes, that works. So it seems margins do not work when using table layout with divs, and one should use padding instead of margins. Right? – Sunil Mar 15 '16 at 20:15
@Sunil In this example, yeah, and like Oriol mentioned, flexbox would probably be a better idea here. My go-to link for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Happy Coding! – Hatchet Mar 15 '16 at 20:19
@Hatchet, Thanks. I have never used flexbox but will check out that article. – Sunil Mar 15 '16 at 20:22
1

@Sunil [Margin properties](https://www.w3.org/TR/CSS21/box.html#margin-properties) do not apply to most table display types. Hatchet: I was going to suggest flexbox indeed, but CBroe was faster. – Oriol Mar 15 '16 at 20:47
@Oriol Right, messed up names. :P – Hatchet Mar 15 '16 at 20:58

Make right and left cells occupy minimum widths to display their contents?

1 Answers1