Question

I am trying to display a basic 4 block layout to the centre of the page. My current effort is utilising the following on the parent div (class=wrapper)

.wrapper
{
margin:0 auto;
width:960px;
}

However, although this then centres all child divs it does not allow me to position the child divs as per my desired layout i.e. having a block left:36px and top: 120px.

Any ideas how I can position child divs absolutely, but in relation to the central positioning of the .wrapper div?

Thanks.

Matt

Answer 1

To position the child divs in relation to the parent div (.wrapper), you can do something similar to:

.wrapper {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
#child-1 {
  position: absolute;
  top: 120px;
  left: 36px;
}

You need to add position: relative; to the parent div so that while using position: absolute; on the child blocks, they will be positioned absolutely within the parent div.

See the example on JSFiddle.

Also, for a quick start, Learn CSS Positioning in Ten Steps