Give help. Get help.

  • # September 26, 2008 at 10:19 am

    This might seem like a dumb question to some but I´m baffled.

    In Chris´ tutorial on ‘Rounded Corners’ I have noticed something in the second example of the five techniques that is interesting.

    This is the code from the tutorial:


    Lorem ipsum dolor

    And the css…

    .box-two { width:300px; background:#fbeac3; border:1px solid #534515; position:relative; margin:10px 0 }
    .box-two .tl { position:absolute; etc. etc. }
    .box-two .tr { position:absolute; etc. etc. }
    .box-two .bl { position:absolute; etc. etc. }
    .box-two .br { position:absolute; etc. etc. }
    .box-two .inside { padding:20px }

    Now my question:
    Why is it, that by just giving the corner divs a position of "absolute", does it make them ‘pop’ into place in four different corners?

    After all, there is a div with a class of "inside" that is marked up before the divs that form the corners.
    How do they manage to scatter all-around the "inside" div like that?

    I´d love to understand this becuase I´ve been doing rounded corners the hard way it seems.


    # September 29, 2008 at 5:51 am

    Mmm… that is very interesting Chris.

    Thanks for the explanation – I understand it much better now.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.