CODEWITHSUNDEEP
css
brianmearns
brianmearns

Reputation: 9967

Position element absolutely, but to the right of another element

I'm trying to add a callout bubble to the right of some form fields using HTML and CSS. I don't want the callout effecting any other layout so I've got it positioned absolutely, but I'd like to somehow position it a certain distance to the right of another element.

This is basically what I have:

<ul>
    <dt><label>...</label></dt>
    <dd>
        <input ...>
        <span class='callout'>Helpful tip about this field</span>
    </dd>
</ul>

And:

.callout {
    position: absolute;
}

So I want the .callout out of the layout flow (hence position:absolute, but I want it positioned just to the right of the input field it's associated with (without knowing the width of the field in advance, of course).

Any ideas?

Upvotes: 2

Views: 1740

Answers (1)

Chords
Chords

Reputation: 6850

You're going to want to position it absolutely relative to your element. So, set your container to position: relative and your callout to position: absolute. Top/left then becomes the top left of the parent element. Make sense?

Here's a fiddle to illustrate the concept:

http://jsfiddle.net/tNCDK/

HTML:

<div id="parent">
    <div id="child"></div>
</div>

CSS:

#parent { 
  position: relative;
  border: solid 1px #000; 
  width: 200px; 
  height: 200px; 
}

#child { 
  position: absolute;
  top: 10px;
  right: -50px;
  border: solid 1px #000; 
  width: 50px; 
  height: 50px; 
}

​​

Upvotes: 5

Related Questions