Placing and centering div inside a div

Question

Hi All,

I wanted to achieve the following layout.

basically 1 div placed inside the other.
Div1 has circle as background image.(size of div varies)
I want to position Div2 so as i always get the above layout

I tried using centering a div inside another ..didnt work.
Do I have to specify top and left for Div2??
I want to be able to define Div2 dimension wrt Div1.

Any help.

Edit

Using the following styles and js

.circle
        {
            width: 176px;
            height: 176px;
            top: 0;
            left: 0;
            background: url('images/circle.png') no-repeat left top;
            display :block;
        }

.inner {
            position: absolute;
            height: 80px;
            margin: auto;
            overflow :hidden;
            white-space:normal;             
        }

Jquery :

//parent is the container c

    var $circle_div = $("<div>").attr({ id: "circle_" + id });
    $circle_div.addClass("circle");
    parent.append($circle_div);

    $circle_div.css({ "top": 100, "left": 200, position: 'absolute' });
    var $inner_div = $("<div>").attr({ id: "text_" + id });
    $inner_div.addClass("inner");
    $inner_div.html("text_circle_333333333333444444444444" + id);
    $circle_div.append($inner_div);

Thanks All

Answer 1

Position div2 absolute with top and left inside relative positioned div1.

div1{position:relative} div2{position:absolute; top:*px; left:*px}

Answer 2

Try this:

<div id="outer">  
     <div id="inner">&nbsp;</div>
</div>


#outer {
    position: absolute;
    width: 100px /*width of image*/;
    height 100px /*height of image*/;
baackground-image: url(path-to-image/img.jpg);
}
#inner {
    position: relative;
    top: 100px /*whatever works*/
    width: 50%; /*or whatever width you want*/
    margin: 0px auto; */centers it horizontally*/ 
}

This will place the div #inner exactly in the center of your outer div.

EDITED to position the div vertically too, I missed that first time, sorry!

Hope it at least helps. :)

Answer 3

Unfortunatelly Kyle's answer will do nothing about centering the inner div vertically.

Liquid vertical alignment is close to impossible using CSS2.1. Given your constraints are there is a circle inside the outer div, that is as tall as the div itself, you'll need to use Javascript to calculate the absolute positioning and dimensions of the inner div that will fit in the circle. Let's assume you give the outer's dimensions fully, and specify a given height for the inner div.

Markup

<div id="outer">  
 <div id="inner">&nbsp;</div>
</div>

CSS

#outer { 
  position: relative; 
  width: 100px; 
  height: 100px;
  backgroud-image: blah
}
#inner {
  position: absolute;
  height: 60px;
}

Javascript (assuming JQuery)

// prepare for semi-intense math
var radius = $('#outer').width()/2;
var height = $('#inner').height();
var d = Math.sqrt(radius*radius - height*height/4);

$('#inner').width(2*d)
    .css('top', (radius - height/2) + 'px')
    .css('left', (radius - d) + 'px');

Edit: Explanation

What we need is to calculate inner.left (call it x), inner.top (call it y) and inner.width (call it w). This is what this problem looks like, the values in red is what we are after:

To note, we have an origin (0,0) for the coordinates of all points. The circle has a radius equal to outer.width/2 (since the circle is as high and long as this div). Thus in our coordinate system, the center, of both divs and the circle, is at (r, r) (r = radius).

First we can deduce the y coordinate from the diagram, because we know the height h.

y = r - h/2

In the diagram, the point we're after lies on the circle, thus we use the equation for the circle and solve for x. So the equation for the circle given center at (r, r) and radius r (remembering high-school maths):

(x - r)^2 + (y - r)^2 = r^2
(x - r)^2 + (r - h/2 - r)^2 = r^2   --- replacing y
x = r ± sqrt(r^2 - 1/4*h^2)         --- solving for x

This x is actually two different x's, one for each point at this y coordinate and depends on whether we take the + or - square root in the answer. The one we need is the lesser of the two. The width of the inner div is given by the difference between these two x's.

w = r + sqrt(r^2 - 1/4*h^2) - [r - sqrt(r^2 - 1/4*h^2)]
w = 2*sqrt(r^2 - 1/4*h^2)