Member Avatar for Buppy

Hi,

I have this following HTML:

...
    <td>
        <div style="position: relative; top:0;"></div>
        <div style="position: relative; top:20px;"></div>
        <div style="position: relative; top:40px;"></div>
    </td>
...

In this case the top value is counted from each div. I need it so that the top value is counted from <td> top, not the previous div as it makes an extra gap between each div. What's the best way to complete this?

Thanks

  • 3 Contributors
  • 2 Replies
  • 83 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Quick clarification and practical fixes for : the top offset on an element with position: relative shifts that element from its own normal spot but leaves its original space in the flow. That is why stacked relative offsets look like extra gaps. is correct that using margins keeps elements in flow and is the simplest fix for regular spacing; is also right to point out that divs are block-level by default.

If the intent is to set explicit distances measured from the table cell top (not from each sibling), make the cell (or an inner wrapper) the positioned container and position the children absolutely. Absolute-positioned children are placed relative to the nearest positioned ancestor, so their top values come from the container top. Note that absolutely positioned elements are taken out of normal flow, so the container will not expand to fit them unless an explicit height or padding is provided.

/* container (td or wrapper) becomes the positioning context */
td.pos { position: relative; height: 120px; }

/* children positioned from td top */
td.pos .item { position: absolute; left: 0; }
td.pos .item.first { top: 0; }
td.pos .item.second { top: 20px; }
td.pos .item.third { top: 40px; }

If keeping items in flow is preferred (so the cell grows with content), use spacing methods that do not remove elements from flow: margins, padding, or a layout like CSS Grid with row-gap. Grid preserves natural sizing while offering precise vertical spacing.

For details on how position and positioned containing blocks work, see the MDN docs: position and containing block.

Recommended Answers

All 2 Replies

Member Avatar for simplypixie

Firslty - you should keep your styling separate rather than putting it inline so move all styling into a style sheet. Then all you need to make a gap between your divs is to use padding or margins:

// In your stylesheet add a class (name what is relevant to you)

.classname {
    margin-top: 20px;
}

Then for the HTML (would be good if you could layout with CSS rather than tables but that is another issue):

<td>
    First line of text here (no div required)
    <div class="classname"></div>
    <div class="classname"></div>
</td>
Member Avatar for almostbob

you do realise that unstyled divs, are 100% width of the containing element and display as block
in otherwords, all you need is

<div></div>
<div></div>
<div></div>
<div></div>
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.