Hello,

 

I need some help centering this website if anyone is up for a challenge.

Used a 'wrap div' in vain..

 

The CSS is a jumble of containers and content divs but after setting all margins to 0 and defining the width I still haven't found the solution. Something is amiss, can you see it?

 

My attempt at centering is here : www.sanctuaryretreat.com.au/MissionBwrap.html

 

Original here: www.sanctuaryretreat.com.au/MissionB.html

 

CSS: www.sanctuaryretreat.com.au/css/sanctuarystyleedwrap.css

 

Original CSS: www.sanctuaryretreat.com.au/css/sanctuarystyleedwrap.css

 

I am not familiar with this website or CSS anymore so any suggestions much appreciated!

 

Thanks in advance..

 

A Retired designer

You have some position: absolute divs like #nav and they won't be contained inside #container unless #container has position: relative so they won't center with #container (which has margin: auto) at the moment. Add position: relative; to #container

Thanks wickham, I just tried that to no avail..

It's still a mess... the content doesn't move..

 

it disappears altogether when I change containerBody position to relative..

 

Thinking now that it will probably be easier if I give up and recode the site completely..

Hate to say it, but that's exactly what I'd do.

Try to work with the real flow of block level elements by using floats etc rather than jumping in to absolute positioning.

Hi Aardvark,

 

What you could do is place the menu div (<div id="secondpane" class="menu_list">) inside of the container div (<div id="containerBody">) So you have this:

 

<div id="containerBody">
<div id="secondpane" class="menu_list"> </div>
<div id="content"> </div>
</div>

 

Then modify your CSS to allow the menu to sit at the left hand side of the page, with the content at the right. Try this CSS:

 

#content {
background-color: #F2FFF1;
background-image: url("../images/contenttop.gif");
background-position: left top;
background-repeat: no-repeat;
border-left-width: medium;
border-right: medium solid #BAD7D7;
color: #666666;
padding: 30px 15px 0;
margin-left: 192px; /* THIS IS THE WIDTH OF THE SIDE MENU */
position: absolute;
margin-top: -22px;
width: 705px;
}
.menu_list {
   background-color: #005A71;
   float: left;
   font-size: 100%;
   height: 100%;
   line-height: 120%; 
   width: 192px;
}

 

What I did was place the menu inside the main container so that both the menu and content containers are both contained by the same parent div. This allowed me to position both elements to their correct positions using margins and pixels.

 

It works OK for me. Try it out and let me know if it's good.

 

Lyndsey.

Start here. if your markup's a mess it's no wonder browsers don't know what to do with it - from the top, you have a HTML4 Transitional DOCTYPE (which was obsolete years ago, use XHTML1 Strict or HTML5) on an obviously XHTML document.

 

The menu appears to be a table - don't do that; tables aren't for layout. A menu is a list of links, so use an unordered list. Etc.

 

When your markup is valid, clean and easily understood you'll be able to control it much better.

First of all, I'm so grateful for your appraisals.. Thanks for your honesty!

 

Mike: It is not really worth my while to recode the site at this stage but I wish I could afford to.

 

Lyndsey: wow, many thanks for your code! I followed your directions exactly and am still faced with a left-oriented page..

 

Renaissance: The umpteen errors do not surprise me.. this was my first CSS site years ago. I am happily retired from this website business now, just doing these guys a favour.. It's very tempting to refer my client to one of you instead.. Anyone want the job? It's a stunning place for a holiday if you want to work on location as I did initially..

Woops, I missed out the part where you're supposed to add margin:0 auto; to #containerBody in addition to the above code I posted.

 

So to clarify,

• Place div #secondpane inside containerBody, before div #content.
  
• Modify the CSS to what I posted in my original message
  
• Also add margin:0 auto; to #containerBody
  

It definitely works, I've just checked it again.

 

Lyndsey.

Wow, you are an absolute genius, Lyndsey!

I have it all centered beautifully and seamlessly.

It's nothing less than a miracle.. really!

 

I needed a day or two off but this is more than I ever expected..

Thank you, thank you, thank you!!!!! If you ever go to Australia and fancy a rainforest hideaway, let me know and I'll make sure you get a luxury cabin.

I mean it.

Glad you've got it sorted and I'll keep that in mind ;-)