Search code examples
htmlalignmentcenter

Centering a Div on a page

So I'm making a website as a final project for a web design class and I can't seem to get a div to center on the page.

This is how I sort of have it set up.

Main Body Div{

div1{}

}

I want Div1 centered

Through CSS (div1) I have set the background of the div as an image and the div size as the image size.

I have tried Margin: 0 auto; on both the body and div1 and text-align: center on both as well.

Here is the source if it's more helpful. The actual divs are "body" and "Div1" is in body. http://pastebin.com/rM5tm52Q HTML is on the bottom.

Thanks so much!

Solution

  • You can't open a div in the header.

    Also, floating a div (#box1) removes it from the flow of content, so margins will not work.

    Working Fiddle: http://jsfiddle.net/PKK92/

    #box1 {overflow: hidden;border-color: red;border: solid; margin: 0 auto;width:976px;height:311;background:url(../images/WebDesign1.png) no-repeat;}