-1

I can't seem to get the website I'm building to center.

I put the website online for you to find the problem:

http://www.piccadilly.london/gourmetdinner-alpha.html and http://www.piccadilly.london/gourmet-alpha.css

Below is my wrapper css, if this is helpful:

#wrapper {
    width: 1270px;
    background-color: #ffffff;
    margin: 0 auto;

}

Waiting for any answers to solve this - thanks in advance.

Mike
  • 1
  • 1
  • 1
    Because everything inside is has un-static positioning. So the size of your wrapper div is virtually nothing. Because of this, it can't be treated as a block element. – Lee Feb 19 '15 at 19:14
  • If you put position: relative on your #wrapper you will center all but your header. You have a fixed with header that will stay left-aligned unless you adjust the width to be a percentage of the containing element. The post below has some explanation. http://stackoverflow.com/questions/2861247/center-aligning-a-fixed-position-div – Chris Feb 19 '15 at 19:15
  • A lot of `absolute` elements. Also, if you don't use media query for responsive design then never aim at width more than 960px and assume width of scroll bars. That kind of design is ___terribad___. Hope you're not charging anyone for it. – DeDee Feb 19 '15 at 19:16

4 Answers4

0

A lot of your html elements have

position: absolute;

This is almost never a good idea.

Check this answer for some more details: center aligning a fixed position div

Community
  • 1
  • 1
Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71
0

You need to make the child elements relative to the container; add the following to your wrapper.

position:relative;
pcwizz
  • 142
  • 7
0

Setting position: relative will do the trick for now, but using absolute positioning is not the best way to go.

I would recommend trying something like Bootstrap (http://getbootstrap.com/) which takes care of element positioning with it's Grid system letting you create fixed or responsive layouts fairly easily.

Good luck learning!

Tony
  • 1,433
  • 1
  • 15
  • 18
0

Mikael, try this

I will explain a basic structure for doing this.

<header>All your header content should come here</header>
<div id="wrapper">
Container part should come here
</div>
<footer>All your footer content should come here</footer>

you can use the same wrapper css (also for header and footer, with position fixed), but remember when writing inner class css's, you should use poisition:relative, or float element. Position absolute is not nice for all time. you will get the idea of positioning and floating from W3schools

Akhil Namboothiri
  • 184
  • 2
  • 13