I thought I was doing something fairly simple, but im having trouble getting my head around it.
I have a div which is a big white box, and i want to add a box below it, equal length, same height, in blue.
I thought i could just give it a relative value and work from the bottom and i'd be all set.
Code:
.box { width:500px; height:200px;background-color: white;}
.box:after { content:''; background-color: blue; width: 500px; height:200px; bottom: 10px; left: 10px; position: relative; }
The specifics of the above are irrelevant, except understanding how to use the relative value.
Anyone know what im doing wrong here? I've stripped all other code and just using that, and it still being a PITA. using a fixed value is fine, but not the relative one, and ive tried a few other things but with no success.
Well, i feel like an idiot now
Remembered years ago (like 8) i'd messed with absolute & relative positions and probably still had it, and i did.
So ive figured it out, and for the sake of possibly answering the problem if someone searches (god i hate it when people just reply 'figured it out' without bothering to tell anyone who might be looking!) i'll explain how it should be:
The box needs the relative position, the :after needs an absolute position, which will be based on the 'relative' one earlier
From there, just needs co-ords based on the bottom -height of the ':after'
what a numpty
Before you post, read our: 
