CODEWITHSUNDEEP
html
NickC
NickC

Reputation: 1353

Awkward horizontal center alignment

Anyone have any ideas how I can horizontally center the following page. As you can see the table section can be easily centered but how to do the same with the group of absolute positioned div's.

http://gideaparkbowlingclub.associateddata.co.uk/1a.htm

Thanks,

Upvotes: 0

Views: 82

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to make a wrapper for all of your absolutely-positioned DIVS, and set it as position:relative. That way the DIVs find their origin in the wrapper. Then you just have to center the wrapper DIV.

.wrapper {
   width:805px;
   margin-left:auto;
   margin-right:auto;
   position:relative
}

P.S. using absolute positioning for everything is a bad idea. Learn how to use floats.

Upvotes: 1

Baldur Þór Emilsson
Baldur Þór Emilsson

Reputation: 301

I would wrap the content inside a <div class="content"> with the following CSS

.content {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

When you absolutely position something inside an element that is relatively positioned the absolute position is relative to that outer element. So your images should not overflow this new div that you insert the content.

Upvotes: 0

Related Questions