Hi everyone, I've run across a problem with my web layout, and maybe someone can help me out! I'm designing a website with a bunch of div "modules" absolutely positioned. I now need to center the site so that it will look right on bigger and smaller displays. I tried creating a centered table and sticking the entire page within the table, but the CSS positioned elements just ignore the table. I've searched through bunches of site, and I've heard all kinds of stuff on inherited positioning and compatibility bugs between browsers, and I've tried making the table relatively positioned and all that sutff, but I think I'm just in over my head; I can't figure out how to fix the problem. It appears in both IE and Firefox. Please, if anyone can help, it would be much appreciated!
hmmm - did you try making a wrapper ( just another div where all the other divs go in) and setting the left and right margins to auto?
you really do not need a wrapper you can do: body{ margin:0 auto; width:770px; position:relative; /* now you can position div elements in reference to this */ }
Thanks infinitely Josh! That worked perfect. I actually changed the width to 820 to work for my site, but I can finally call this one done! By the way, it's not super fancy or anything, but if you want to see it: www.spittnoevilmusic.com