I am looking to create a set of divs that are centered on the page and adjust in size according to the length of the username.
.Container1
{
display: table;
width: 100%;
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.Container2{
position: absolute;
left:0;
right:0;
margin-right:auto;
margin-left:auto;
width:100%;
max-height:30px;
padding:0;
overflow:hidden;
}
<div id="maincontainer" runat="server" class="Container1">
<div class="Container2" runat="server">
<div class="leftbar"><img src="Some image" runat="server" /></div>
<div id="child1container" runat="server">
<span class="textclass" runat="server">UserName</span>
<span class="textclass" id="BankName" runat="server">BankName</span>
<span class = "Col"> ---Some Content --- </span>
<span class="barBtn"> ----Logout Button----
</span>
</div>
<div class="rightbar"><img src="Some image" runat="server"/></div>
</div>
</div>
The sections inside Container2 should be centrally positioned at the top of the webpage, with their container width adjusting based on the length of the username. For longer names, the entire container should still be centered.
I want this container to behave like the one shown in this JSFiddle example: https://jsfiddle.net/c2t017sx/
When the username length changes, I expect the container to expand from the center while maintaining its central position all the time. However, implementing similar changes in my application does not work as expected. I need guidance on which properties to set for container2 and child1container to achieve this behavior. Can it be done using CSS alone or do we need to use JavaScript to adjust the container size (CSS style) based on input values?