Home/ Questions/Q 8645893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T12:40:02+00:00

By default, block level elements have width of like 100% even without content, it

  • 0

By default, block level elements have width of like 100% even without content, it occupies the space across it’s parent element horizontally.

Inline elements on the other hand, adjust it’s width depending on it’s content. If the the content is long, then the element becomes wider, if the content is short the width shrinks.

enter image description here

Here’s a demo.

What I want to achieve here is to make the block-level element to have a width that will adjust depending on it’s content like inline element. How will I do that?

Note:

  • I want block elements to be block, not inline-block or inline.
  • I want
    to avoid floats, I think it can be achieved without floating
    elements.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I remembered that the width of the table is exactly what I’m trying to mimic. It adjust depending on the length of the content. I found a default stylesheet for HTML 4, the table’s display property is set to “table” so I tried it to div and it works:

    div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

    Demo

    • 0