Member Avatar for kooia

I want to have a position:relative element inside another. Position:absolute actually would work better, but I don't want to mess with all of that. So how can I get something like Daniweb's [CODE_] thing? I want to have a main DIV, with a DIV inside, on the left. The DIV inside will have a grey background and line numbers (just like Daniweb's code again). How can I do this, because when I make the inside DIV go to the top left like this:

,inside
{
position:relative;
background-color:#CCCCCC; /*Not sure about the color*/
top:0;
left:0;
/*some more stuff*/
}

it doesn't go to the top left. What kind of positioning should I use? Or any other suggestions? Sorry if it's not clear, ask if you want me to explain it more clearly.

  • 1 Contributor
  • 1 Reply
  • 103 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by kooia

Dani AI

Generated

The behavior you saw is normal: position: relative does not remove an element from the document flow. It keeps the element where it would normally be, and top/left simply shift it from that spot while leaving its original space. As discovered, margins can move things visually, but they change layout and can be fragile for a stable gutter of line numbers.

Two reliable patterns for a left gutter (line numbers) are common: give the parent a positioning context and absolutely position the gutter, or use a two-column layout with flexbox/grid. Absolute positioning makes the gutter sit independent of the flow (so it won’t push the code down), but remember the parent must be non-static to contain the absolutely positioned child. Flexbox/grid keeps both pieces in flow and is often simpler and more responsive.

A compact flexbox approach (HTML + CSS) you can adapt:

<div class="code-wrap">
  <div class="gutter">1<br>2<br>3</div>
  <pre class="code">...</pre>
</div>

<style>
.code-wrap { display:flex; align-items:flex-start; }
.gutter   { width:48px; background:#f0f0f0; text-align:right; padding-right:8px; box-sizing:border-box; }
.code     { flex:1; margin:0; padding-left:8px; overflow:auto; }
</style>

Troubleshooting checklist: verify your selector syntax (a stray character will stop rules from applying), inspect computed styles in DevTools to see actual offsets, ensure the parent has position set when using absolute positioning, and choose flex/grid for responsive layouts. For details on how CSS positioning works, see the MDN reference on CSS position and the guide to Flexbox layout.

Member Avatar for kooia

Thank you everyone, because by posting this, I answered my own question. The way you have to do it is to use the margins. Like this:

margin-top:50px;
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.