Below is the HTML code I am working with:
I have utilized display:table and display:table-cell to structure the divs in a table-like format without resorting to using an actual HTML table. The setup is functional, however, the widths of the left and right cells are significantly larger than the content they hold.
You can view a demo related to this query at the following URL:
Inquiry: What CSS adjustments can be made to enable the left and right cells to automatically resize based on their content? I prefer not to manually specify their widths.
In my attempt to address this issue, I adjusted the center div to 100% width. While it achieved the desired outcome, the margins of the left and right divs were disregarded. Thus, I believe there might be a more effective solution that I am overlooking!
https://i.sstatic.net/nElDs.png
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>