CSS circles without width or height? : Is this possible with pure CSS or not?

Question

I can turn a div into a circle like this:

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 height: 200px;
 width: 200px;
 -moz-border-radius:50%;
 -we         


        

Answer 1

All you need to do is replace you height and width with a padding and display inline-block. Reference: http://jsfiddle.net/6mzP7/

.circle {
   background-color: rgba(0, 0139, 0139, 0.5);
   padding: 200px;
   display: inline-block;
   -moz-border-radius:50%;
   -webkit-border-radius: 50%;
   border-radius:50%; 
}

​<div class="circle"></div>

The HTML can stay the same.

Answer 2

EDIT: I mistook your question. You'll need Javascript to assign the hight width to the highest value, as well as make sure your content is centered.

Here's how in this JSFiddle: http://jsfiddle.net/rgthree/K4Kpw/

<div class="circle">
    <div>
        <span>This is a line</span>
        <span>This is yet another line!</span>
        <span>Last Line!</span>
    </div>
</div>​

CSS:

.circle {
    position:relative;
    background-color: rgba(0, 0139, 0139, 0.5);
    padding:10px;
    -moz-border-radius:50%;
    -webkit-border-radius: 50%;
    border-radius:50%;
}
.circle > div{
    position:absolute;
    top:50%;
    left:50%;
}

JQuery:

$('.circle > div').each(function(){
    var h, w, max;
    w = $(this).width();
    h = $(this).height();
    max = w > h ? w : h;
    $(this).css('margin-left', -parseInt(w/2,10));
    $(this).css('margin-top', -parseInt(h/2,10));
    $(this).parent().width(max);
    $(this).parent().height(max);
});​

Answer 3

I don't believe that you can achieve what you want simply with CSS. I took a crack at a scripted solution to the problem...

The CSS:

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
 padding:10px;
}
.circle span {
white-space: nowrap;
}
.circle div {
position:relative;
top:0;
left:0;
}

The HTML:

<div class="circle">
    <div>
        <span>this is some text</span>
        <span>this is some more text</span>
        <span>this is text</span>
    </div>
</div>

The script:

$(function() {
    var widest = 0;
    $('.circle span').each(function(){
        thisWidth = $(this).innerWidth()
        if (thisWidth > widest) {
            widest = thisWidth;
            };
    });
    $('.circle').css('width',widest).css('height',widest);
    $('.circle div').css('top',(widest - $('.circle div').innerHeight())/2);
});

Edit: I've created a fiddle of this suggestion: http://jsfiddle.net/4m2ZZ/

Answer 4

Pure CSS Solution with some caveats

This fiddle demonstrates a solution using only css. It works flawlessly (I think) in modern browsers (IE9+, which is needed for border-radius anyway) with single lines of text. Caveats are:

1. As you can see by the pink "circle" the text must all be contained in a single element (not multiple spans as in the pink). That is not a big problem.
2. To get any kind of "padding" one needs to put a transparent border on the span set to the "padding" size. This should also not normally be a big issue, since it is unlikely you would want borders inside the circle.
3. As you can see by the css on the cyan circle, if multiple lines of text are expected (or forced in my case by a max-width), then css for margin-top and top properties must be set according to the number of text lines. This could be an issue depending on application. On the stacked version, IE9 needed overflow: auto set to get it to size correctly.
4. As you can see by the red circle if you narrow the display area, if white-space: nowrap is not set and a circle begins wrapping its single line of text, then some ovular distortion of the circle occurs.

Each web designer would have to determine if the limitations of this solution can be accounted for or not. If not, then the javascript solution posted here by rgthree should work well. But if only a single line (or some set number of lines, like in my cyan circle) are expected, then this css solution should work well.