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:
And the css…
Code:
.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.
Thanks!