Help with Centering a main div for all screen sizes..

TrumandrummerTrumandrummer Taylor Michigan Icrontian
edited February 2010 in Internet & Media
I just set up this new site for my band. Me and my buddy have been working on this site design for quite some time now.

I made a few different site layouts for us in the past, but they never looked right on any screen size that was bigger or smaller than mine.

In an attempt to get around that this time. I decided to make one big invisible container div and then put all of my other divs, nested withing that main div. That way I could center my main div, and everything else will automatically move with it.

Well it works. Sort of. It looks perfect on my 20" widescreen. It looks perfect on my 17" widescreen. But on a 15" widescreen, the whole main div is positioned off to the right of the screen.

www.closerenemies.com

This is the code that I am having trouble with. I took out the contents of the divs to save space.

.outerDiv {
    border:0;
    width:895px;
    height:900px;
    position:absolute;
	left:23%;
	top:0px;
    color:#FFFFFF;
    font-family:verdana;
    font-weight:bold;
    font-size:11px;
    text-align:center;
    }
   
    .nestedDiv1 {
    width:775px;
	height:795px;
    position:absolute;
    top:0px;
    left:60px;
    }
   
    .nestedDiv2 {
    width:19px;
	height:33px;
    position:absolute;
    top:10px;
    left:5px;
    }
   
    .nestedDiv3 {
    width:56px;
	height:180px;
    position:absolute;
	top:100px;
    left:5px;
    }
   
    .nestedDiv4 {
    width:55px;
	height:126px;
    position:absolute;
    top:280px;
    left:5px;
    }
	
	.nestedDiv5 {
    width:55px;
	height:173px;
    position:absolute;
    top:406px;
    left:5px;
    }
	
	.nestedDiv6 {
    width:55px;
	height:130px;
    position:absolute;
    top:579px;
    left:5px;
    }
	
    </style>
   
</head>
[HTML]<body background="images/bg.jpg">

<div class="outerDiv">
<div class="nestedDiv1"></div>
<div class="nestedDiv2"></div>
<div class="nestedDiv3"></div>
<div class="nestedDiv4"></div>
<div class="nestedDiv5"></div>
<div class="nestedDiv6"></div>
</div> [/HTML]


As you can tell from the code. I have my outer div (main div) at 23% from the left. This makes my main image dead center on both my 20" and 17" screens. All of the nested divs, fall right into place. If I could just get my main div to center on every screen size. I would be all set.....:banghead:

Does anybody know of a way to fix this?
Thanks a lot

PS: I know some of my site coding is iffy. I am still learning.

Comments

  • DogSoldierDogSoldier The heart of radical Amish country..
    edited February 2010
    The "left:23%;" is throwing it off at lower resolutions. Let me take a closer look at it, get back to you...
  • KwitkoKwitko Sheriff of Banning (Retired) By the thing near the stuff Icrontian
    edited February 2010
    Instead of 
    left:23%;
    Try 
    margin-left: auto;
margin-right: auto;
  • LincLinc Owner Detroit Icrontian
    edited February 2010
    Remove position:absolute; and ALL the top and left settings. That's for fixing screen position, not keeping it centered. That plus Kwitko's suggestions (or alternatively margin: 0 auto; ) should fix it.
  • DogSoldierDogSoldier The heart of radical Amish country..
    edited February 2010
    He needs the position:absolute; CSS in order to tie it all together I think.. He has images sitting on top of images where they could/should be used as backgrounds. First thing you should do is add a "." to all the class tags in your HTML. ie, for div class="nestedDiv3" add a period before "nestedDiv3" so it looks like this div class=".nestedDiv3"
  • TrumandrummerTrumandrummer Taylor Michigan Icrontian
    edited February 2010
    Ok, thanks for the quick responses guys :)

    I gave Kwitkos advice a try.
    margin-left: auto;
margin-right: auto;

    It pushed everything right to the left of the screen.
    As you can see here: http://closerenemies.com/indextest.html

    So I kept Kwitkos code, and changed 
    position:absolute;
    to 
    position:relative;

    This seems to have centered everything correctly. However, the one problem that I am having with this is, it is now ignoring my.... 
    top:0px
    As you can see here: http://closerenemies.com/indextest2.html
    It appears to be centering itself just fine, but It will no longer align to the very top of the screen. :(

    Any way to get around this ?

    Again, thanks for the help guys. I really appreciate it.

    Here is the new code that I am working with
    .outerDiv {
    border:0;
    width:895px;
    height:900px;
    position:relative;
	margin-left: auto;
    margin-right: auto;
	top:0px;
    color:#FFFFFF;
    font-family:verdana;
    font-weight:bold;
    font-size:11px;
    text-align:center;
    }
   
    .nestedDiv1 {
    width:775px;
	height:795px;
    position:absolute;
    top:0px;
    left:60px;
    }
   
    .nestedDiv2 {
    width:19px;
	height:33px;
    position:absolute;
    top:10px;
    left:5px;
    }
   
    .nestedDiv3 {
    width:56px;
	height:180px;
    position:absolute;
	top:100px;
    left:5px;
    }
   
    .nestedDiv4 {
    width:55px;
	height:126px;
    position:absolute;
    top:280px;
    left:5px;
    }
	
	.nestedDiv5 {
    width:55px;
	height:173px;
    position:absolute;
    top:406px;
    left:5px;
    }
	
	.nestedDiv6 {
    width:55px;
	height:130px;
    position:absolute;
    top:579px;
    left:5px;
    }


    Also DogSoldier,
    I tried what you said about adding the "." to the div tags in the HTML. It scattered the divs out all over the place. They were no longer placed correctly on the page for some reason.
  • LincLinc Owner Detroit Icrontian
    edited February 2010
    Truman, if you have a gap at the top it means you have a margin or padding in the way. Did you set the body padding to 0?

    Google "reset.css" and consider using that as a first step in future web projects so you have a solid starting point without browser-defined margins and paddings to worry about.
    DogSoldier wrote:
    First thing you should do is add a "." to all the class tags in your HTML. ie, for div class="nestedDiv3" add a period before "nestedDiv3" so it looks like this div class=".nestedDiv3"
    A period is how you reference the class in CSS, but the class name itself must be strictly alphanumeric.
  • DogSoldierDogSoldier The heart of radical Amish country..
    edited February 2010
    Odd, the reason I added the periods was to get the CSS to work in IE8, without them, the divs were all over the place.. the complete opposite of your experience. In any case.. I hope you get it working, I like the look and layout!
  • TrumandrummerTrumandrummer Taylor Michigan Icrontian
    edited February 2010
    Lincoln wrote:
    Truman, if you have a gap at the top it means you have a margin or padding in the way. Did you set the body padding to 0?

    Google "reset.css" and consider using that as a first step in future web projects so you have a solid starting point without browser-defined margins and paddings to worry about.

    A period is how you reference the class in CSS, but the class name itself must be strictly alphanumeric.

    Thank you Lincoln. I applied the following to the body: 
    {
	margin: 0;
	padding: 0;
}
    It fixed it. Everything appears centered, and aligned to the top. :D

    Next time, I will use that "reset.css"

    Thanks a lot guys. :rockon:
Sign In or Register to comment.