Member Avatar for garyjohnson

I have a div, which is a contanier. Inside is another div that displays numbers.

<div class="commentie_box">
  <div class="commentie_number">
  1234567890
  </div>
  </div>

Here is the css

.commentie_box{
float:right;
width:260px;
padding-top:10px;
height:49px;
border:1px solid #0FF;  
}

.commentie_number{
    position:relative;
    margin:0 auto;
    padding:5px;
    padding-top:2px;
    padding-bottom:2px;
    width:auto;
    height:35px;
    background-color:#fff;
    border-radius:5px;
    text-align:center;
    font-size:25px; 
}

I am trying to get the commentie_number to center in the commentie_box and have the width of the number 1234567890, but this number changes from php. So the number could be 12345 or 12. The inner div needs to be able to change its size automatically to the length of the number and be centered in the outer div. As of now the inner div when set to width auto will expand to the length of the outer div and not the length of the numbers.

  • 2 Contributors
  • 2 Replies
  • 236 Views
  • 21 Minutes Discussion Span
  • Latest Post Latest Post by garyjohnson

Dani AI

Generated

Good call from — the reason the inner box stretched was that block-level elements expand to their parent's width. Making the inner element inline-level (a <span>) or having the inner div behave like one keeps its width tied to the number itself. Two compact, practical patterns follow that keep the number auto-sized and centered inside a fixed-width right-floated container.

Use inline-block + text-align on the parent (works well if a simple horizontal center is needed):

.outer {
  float: right;
  width: 260px;
  height: 49px;
  text-align: center;     /* centers inline/inline-block children */
}

.inner {
  display: inline-block;  /* shrink-wrap to content */
  padding: 4px 8px;
  white-space: nowrap;    /* prevent digit wrapping */
  line-height: 35px;      /* easy vertical centering for single-line text */
  vertical-align: middle;
}

Modern alternative — flexbox (handles horizontal + vertical centering in one rule):

.outer {
  float: right;
  width: 260px;
  height: 49px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

.inner { white-space: nowrap; padding: 4px 8px; }

Practical notes: remove margin: 0 auto and unnecessary position: relative from the inner element when using these approaches. Keep white-space: nowrap if the number must never wrap; add text-overflow: ellipsis and overflow: hidden on the parent if very long values must be clipped. For legacy browsers where inline-block isn’t reliable, the original span suggestion is the simplest fallback. These patterns map directly to ’s classes (apply .outer => .commentie_box and .inner => .commentie_number).

Recommended Answers

All 2 Replies

Member Avatar for AleMonteiro

Div's width by default is 100% of it's parent.
In your case I think it would be easier to use an <span>, wich the width just wrap it's content.

Or you can set display: inline to the div, wich will make it just wrap it's content.

Member Avatar for garyjohnson

Thanks for the response! Never thought about using a span! Works wonderfully.

Edited by garyjohnson because: mispelled word
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.