Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Thanked 0 Times in 0 Posts

    Using :before with a relative setting

    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.

    .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
    Last edited by PaulC2K; 09-18-2012 at 03:00 AM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts