0

How to horizontally center a div of 10000px (or others wider than full screen) in CSS?

e.g.

#widerdiv{
    width:10000px;
    height:100px;
    border:#009933 1px solid;
}

it seems "margin: 0 auto" doesn't work in this situation

7
  • Why 10000? That is an extremely large number!! And where are you trying to center it? Inside of another div? In the body tags of the HTML text? Dec 27, 2013 at 9:01
  • Works the same as div with any other size. The reason you don't see a difference might be that you are unable to check it out properly.
    – Fengson
    Dec 27, 2013 at 9:02
  • 2
    Is there anything worse than horizontal scrolling in a browser?
    – rickhg12hs
    Dec 27, 2013 at 9:02
  • 1
    @rickhg12hs Yes! There is. Zooming and horizontal scroll together.
    – Ranveer
    Dec 27, 2013 at 9:04
  • Do you mean that the center of the div should be in the center of the screen? (That would mean that the left side of the div is cut off and can't be scrolled to.) Or that the screen should be horizontally scrolled to the center of the div? Those are the only cases of "horizontally center" that make sense when the content is wider than the screen.
    – JJJ
    Dec 27, 2013 at 9:04

2 Answers 2

5

Try add similar to

position: absolute;
left: 50%;
margin-left: -5000px;
0
0

As ridiculous of a width as that is.. I have two solutions for you.

The margin won't work because it has nothing to align itself with so here are two possibilities.

First Solution: Use a div to wrap it. The JsFiddle and the code below:

<div id="wrapper">
    <div id="widerdiv"></div>
</div>

CSS for first solution

#wrapper{
    width: 1000px
}
#widerdiv {
    width:500px;
    height:100px;
    border:#009933 1px solid;
    margin: 0 auto;
}

Second Solution: Define your body width. The JsFiddle and the code below(which is only CSS because I would not have modified your HTML) :

body{
    width: 1000px
}
#widerdiv {
    width:500px;
    height:100px;
    border:#009933 1px solid;
    margin: 0 auto;
}

Now, by all means necessary, you can make that width as big as you want (heaven forbid the horizontal scrolling...) but if you play with those JsFiddles, you are going to realize that you absolutely need to define a width of whatever this Div is inside of.

Last, the Almanac is going to be your friend on this one. And as a quick breakdown, incase you decide to try vertical positioning, this is what happens when you use 'margin: 0 auto;' in CSS:

"The element is given a specified width
The left and right margins are set to auto
Without the specified width, the auto values would 
essentially have no effect, setting the left and right 
margins to 0 or else to whatever is the available space 
inside the parent element.

It should also be pointed out that auto is useful 
only for horizontal centering, and so using auto for
top and bottom margins will not center an element horizontally, 
which can be confusing for beginners."

The quote above is also referenced in the Almanac.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.