Treehouse: Grow your CSS skills. Land your dream job.

Positioning CSS

  • # July 17, 2011 at 10:52 am

    How can I get a div (or any other block level element) to be center of page and then have elements within it absolute positioned relative to the containing block element?

    # July 17, 2011 at 11:50 am

    well if you take a div and set its top and left to 50% that should keep it centered on the page even if the window is resized, then simply position all the other elements within the div with values in pixels so they will maintain their positions within the div when the div moves to keep centered on the page.

    # July 17, 2011 at 5:39 pm

    Firstly you will need a container that takes up the entire screen. Then absolutely position the element to be centered and as #furrball1383 said, set it’s top and left position to 50% (make sure it has a defined height and width). You will then need to position the containing element off the top and left of the screen by the same amount as the height and width of the centered element.

    Here is a fiddle that shows what I mean.

    # July 17, 2011 at 9:32 pm

    Ok, I will fiddle with that a bit tomorrow.


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

You must be logged in to reply to this topic.