CODEWITHSUNDEEP
csscenter
Abstract Box
Abstract Box

Reputation: 1

Div Tag Will NOT Center?

In doing my coding, I am trying to have my div "hold" be fixed when the screen scrolls and be centered. I have divs inside of the which are the logo and the navigation which will all go down the page when it scrolls.

For some reason, after trying everything, I can not get the div "hold" to center on the page.

#hold {
width: 900px;
height: 100px;
margin: 0 auto;
position:fixed;
}

Here is a live view of the site incase you wanted to see the rest of the code, http://fuse.orgfree.com/Portfolio%202012/ The div with the logo should be much farther to the center but it just wont go.

Any and all assistance is appreciated! Thanks alot!

Upvotes: 0

Views: 1077

Answers (3)

Robin
Robin

Reputation: 8498

A example of a div,

<div class="center"></div>

which is fully centered with and fixed with the following style:

.center{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    background-color: blue;
}​

You can find a demonstration here.

To center it horizontally only:

.center{
    position: fixed;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left:-100px;
    background-color: blue;
}​

Make the div's content also centered or make it fluid.

Upvotes: 2

j08691
j08691

Reputation: 207943

Add this CSS to your hold div:

#hold {
left: 50%;
margin-left: -450px;
}

The margin-left property should be half the width of your div.

Upvotes: 2

Jim
Jim

Reputation: 2300

The position: fixed is what is causing your hold div to not center properly. Remove that line and the div moves to the center of the page.

Upvotes: 2

Related Questions