CSS: display:inline-block and positioning:absolute

by

When you use position:absolute;, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there’s nothing else to set the height, then the container will be zero height.

Additionally, setting display:inline-block; does not make any sense for an element that is position:absolute;. Again, this is because absolute positioning takes the element out of the page flow. This is at odds with inline-block, which only exists to affect how the element fits into the page flow. All elements that are position:absolute; are automatically treated as display:block, since that’s the only logical display mode for absolute positioning.

If you need absolute positioning, then the only solution to your height problem is to set the height of the container box.

However, I suspect that you could do without the absolute positioning.

It looks like what you’re trying to do is position the second <span> in each block to a fixed position in the block, so that they line up.

This is a classic CSS problem. In the “bad-old-days”, web designers would have done it using a table, with fixed widths on the table cells. This obviously isn’t the answer for today’s web designers, but it is something that causes a lot of questions.

There are a number of ways to do it using CSS.

The easiest is to set both the <span> elements to display:inline-block;, and give them both a fixed width.

eg:

<div class="section">
    <span class="element-left">some text</span>
    <span class="element-right">some text</span>
</div>

with the following CSS:

.section span  {display:inline-block;}
.element-left  {width:200px;}
.element-right {width:150px;}

[EDIT]after question has been updated

Here’s how I would achieve what you’re asking now:

<div class="section">
    <span class="element-left"><span class="indent-0">some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class="section">
    <span class="element-left"><span class="indent-1">some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class="section">
    <span class="element-left"><span class="indent-2">some text</span></span>
    <span class="element-right">some text</span>
</div>

with the following CSS:

.section span  {display:inline-block;}
.element-left  {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}

A small amount of extra markup, but it does achieve the effect you want.

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. Why can’t an element with a z-index value cover its child?
  3. How can I center an absolutely positioned element in a div?
  4. Fixed position but relative to container
  5. Why bottom:0 doesn’t work with position:sticky?
  6. Understanding z-index stacking order
  7. Difference between style = “position:absolute” and style = “position:relative”
  8. Make div stay at bottom of page’s content all the time even when there are scrollbars
  9. Why does applying a CSS-Filter on the parent break the child positioning?
  10. Center a position:fixed element
  11. My position: sticky element isn’t sticky when using flexbox
  12. How to make fixed header table inside scrollable div?
  13. What are `scrolling boxes`?
  14. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  15. What are the default top, left, botton or right values when position:absolute is used?
  16. Difference between static and relative positioning
  17. Set Google Maps Container DIV width and height 100%
  18. position: absolute without setting top/left/bottom/right?
  19. CSS: Top vs Margin-top
  20. pure CSS multiple stacked position sticky?
  21. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  22. Targeting position:sticky elements that are currently in a ‘stuck’ state
  23. Absolute positioning ignoring padding of parent
  24. object-fit, object-positioning and absolute positioning
  25. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  26. position:fixed when left/top/right/bottom aren’t specified – desired results in FF/IE, but not in Safari
  27. position relative in firefox [duplicate]
  28. Have a fixed position div that needs to scroll if content overflows
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment