I am trying to centre the whole of my page. I have kind of done it by creating a div called "alignment" containing all my HTML. Then I've done this with the CSS:

#alignment {text-align: left; margin: 0px auto;
	width: 750px;

It kind of looks centred but I've got really long horizontal scrollbars for no apparent reasons. How can I make them go away and have my page sitting in the middle?

8 Years
Discussion Span
Last Post by Airshow


Assuming you want fixed width content of 750px, try the following css:

#alignment {
    width: 750px;
    position: relative;
    left: 50%;
    margin-left: -375px;

(add further directives as required)

I can't really explain your horizontal scroll bar but can only assume it's caused by some wide content (maybe an img, or a div or para styled to be wider than #alignment).

If necessary you can force #alignment not to scroll with css overflow:hidden but it will clip any content that would otherwise cause scrollbar(s) to be needed.

In general, people don't do this, preferring to control content widths instead. User-generated content is always a potential problem in this regard and you pretty well have to accept that pages can be pushed out of shape.

See eg. here for more about overflow.

Now I really must go to bed. It's late here.


This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.