Trying to align a div in a wrapper

AdRock · #1 (**permalink**) Feb 19th, 2007, 21:07

I am trying to align a div which holds an image but it is not centering.

I have an image i use as a background image which gives the impression the page content is a piece of paper with shadows underneath.

I want to add the content in the actual page and in IE it lines up perfectly but if Firefox it's not. In Firefox the div is aligning to the edge of the background image.

If anyone knows how i can align the content centered in both browsers I would be grateful

The background image is 841px by 5px. I've included a zipped folder with the css file, image and html file if people want to see what is going on.

Here is the CSS for the layout so far

Code: Select all

 
body {
   padding: 0;
   margin:0;
   background-color: #69B7E3;
   width: 100%;
   height: 100%;
   text-align: center;
}
 
.content {
   margin-left: auto;
   margin-right: auto;
   width: 841px;
   height: 100%;
   background-image: url(bg1.gif);
   background-repeat: repeat-y;
}
#title {
   width: 787px; 
   height: 120px; 
   position: relative; 
   top: 2px; 
   left: 0px; 
   z-index: 1;
   background-color: #ffffff; 
   border: none;
}

masonbarge · #2 (**permalink**) Feb 19th, 2007, 21:19

I had the same problem (I probably read the same web page as you did). I eventually made a .gif with the background color filled in, instead of just side/corner/bottom shadow, and they were exactly the same KB in size!

So -- Try doing a graphic with both the shadow and the background. I bet if your background is a solid color, it take no more memory and save a ton of positioning hassles.

I did it in two parts, a shadowed background 1px high and a bottom 7px high, with the corner and bottom shadow.

Have a look
http://www.dhreport.com/test_interactive/waist_hip.php

AdRock · #3 (**permalink**) Feb 19th, 2007, 21:35

I have got the background image working OK and it repeats as it should but when i try to add a div it is supposed to center in the screen but it doesn't it.

It takes the left position to the left posistion of the div holding it (i use nested divs)

masonbarge · #4 (**permalink**) Feb 20th, 2007, 13:26

I misunderstood, I thought that it was the shadow giving you problems.

FF and IE are both hard with floats and centers in a nested div situation. Actually, I'm surprised: margin: 0 auto has always worked with FF but not IE.

Have you tried adding "text-align: center"? to .content and then text-align:left to the inner boxes?

To tell you the truth, to get cross-browser compliance, I just approximate left margins to internal boxes (especially in float situations) and have alternate style for other browsers if there are differences.

AdRock · #5 (**permalink**) Feb 21st, 2007, 12:17

I got it working now

I had to use this

Code: Select all

 
body {
   margin: 0;
   background-color: #69B7E3;
   min-width: 841px;
   text-align: center;
}
 
.content {
   position: relative;
   margin: 0 auto;
   width: 841px;
   height: 100%;
   background-image: url(bg1.gif);
   background-repeat: repeat-y;
   text-align: left;
}

I had to add the min-width property and it lined up properly.

I did have to set the inner div to text-align: left though

dawg9 · #6 (**permalink**) Feb 22nd, 2007, 13:20

I wish I had seen this post two weeks ago before I finally figured this out for myself this morning.

I did notice that margin 0 auto; worked in FF but not in IE. Will using text align left fix the problem in IE?

http://www.betagammachapter.com/welcome.html

karinne · #7 (**permalink**) Feb 22nd, 2007, 13:29

margin: 0 auto works in all browsers. However, if you are still supporting IE5.5 then you need to add text-align: center in the parent element.

How to center your site horizontally
<body> can be used to style too!

masonbarge · #8 (**permalink**) Feb 22nd, 2007, 16:03

For IE, centering block elements by auto-margins only works starting from version 6 and only when in "standard compliant" mode. I still use text-align for IE 6, just in case of quirk problems.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Wrapper problem	goldy	Web Page Design	2	May 30th, 2008 19:11
wrapper not detecting content	saltedm8	Web Page Design	4	Apr 6th, 2008 22:31
overhanging an imge in a wrapper div	lister110	Website Planning	1	Jan 13th, 2008 18:24
[SOLVED] CSS wrapper affecting body	Joolsd186	Web Page Design	7	Dec 31st, 2007 19:11
My navigation breaks my wrapper.	tigerslicer	Web Page Design	6	Sep 10th, 2007 10:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Trying to align a div in a wrapper