Website Design Forum

**Donkey Kong** · 09-05-2006, 12:53 AM

Hey everybody,

I'm as green as they come to web design so I'm not even sure how silly this question is, but here goes. I've designed a page with Dreamweaver 8 using strictly layers and am frustrated because I'm unable to center the pages contents on a maximized browser window. Is there a simple fix or am I looking at a complete redesign. You can see the site at www.jjewelrydesigns.com to witness this first hand. I've noticed that nearly every page I vist has the capability to expand to fit the browser window and some do what I'm interested in (sort of a floating effect) but when I look at the code I can't find anything that helps.

Thanks for the help, DK

**Brendan22** · 09-05-2006, 12:16 PM

Looking at your code, i noticed 2 things:

1) Name your divs! "Navigation" or "Top-Menu" or "Content" instead of "Layer18" would make helping you out a whole lot easier..

2) You should take all that inline CSS (everything between <style type="text/css"> and </style>) and move it to an external stylesheet. That way when you make changes, you only have to change the one stylesheet and not every page.

Sorry i didn't answer your question, maybe if no one else tackles it i'll look it over when i get home from work

**LadynRed** · 09-05-2006, 03:07 PM

It's not a silly question, the only silly question is the one you do NOT ask

To center a design with CSS takes a couple of things, but the first thing you need to do is lose all that absolute positioning, it will do nothing but drive you nuts.. and cause other problems.

I would highly recommend this tutorial:
Floatutorial: Step by step CSS float tutorial

..and this reference on css layouts:
Css Layouts - css-discuss

A very basic approach to a centered fixed-width layout:
body{
text-align: center;} - centers for IE

#wrapper{ - a main container for everything else
position: relative;
width: 780px; -- for an 800x600 layout
margin: 0 auto: - centers the container in non-ie browsers
text-align: left;}

Then your html setup would look like:

<body>
<div id="wrapper">
content and other divs go inside this "wrapper"
</div>
</body>

I would also suggest you use an unordered list for your menu and get rid of all those unnecessary divs.
Listutorial: Step by step CSS list tutorial