Position code mess ups according to screen size...

**ModernRevolutions** · 04-08-2009, 01:02 PM

I have a problem. My website layout is made using DIV position codes. However, my background that has a white strip down the middle is set to "center". So it will look perfect on my computer and like this on other screen resolutions. I need a way to center my "headerdiv" and my "contentdiv" and "sidebardiv". If there are other ways to fix this problem I am all ears. Here are my DIV codes, as well as my background code:

Code:

body {
text-align : right;
margin : 0;
background : url(http://www.modernrevolutions.vivid-avenue.net/layout/awesomebar.jpg) repeat-y;
background-position : top center;

div#headerdiv {
position : absolute;
top : 0px;
left : 274px;
width : 715px;
height : 322px;
background-image : url('http://www.modernrevolutions.vivid-avenue.net/layout/megan.png');
border : 0;
border-style : solid;
}


div#sidebardiv {
position : absolute;
left : 755px;
top : 350px;
width : 220px;
height : 550px;
border : 0;
border-style : solid;
font-family : arial;
font-size : 11px;
}


div#contentdiv {
position : absolute;
left : 300px;
top : 350px;
width : 450px;
height : 1100px;
font-family : georgia;
font-size : 11px;
line-height:13px;
text-align : left;
}

**Snookerman** · 04-08-2009, 01:16 PM

Wrap everything in a div and give it the following CSS rules:

Code:

div.wrap {
margin: 0 auto;
width: 715px;
}

Good luck!

**ModernRevolutions** · 04-08-2009, 03:15 PM

So i put that in my CSS and it should fix the problem? Do i have to put anything in my header or anything?

**Snookerman** · 04-08-2009, 08:42 PM

You should also wrap all the content in the body with a div, like this:

Code:

<body>
<div class="wrap">
Everything here
</div>
</body>

Then you just add the CSS code, you don't need to change anything in your header.

**ModernRevolutions** · 04-09-2009, 03:57 PM

my body is in my header :?

here is what it looks like: site, header, stylesheet.

**Snookerman** · 04-09-2009, 03:59 PM

Sorry?? Now I'm confused

Just wrap everything inside the body tags with the wrapping div and add my CSS code to your CSS code.

**ModernRevolutions** · 04-09-2009, 04:01 PM

I added the CSS code into my stylesheet (CSS). And everything in my site is mostly in my header. So i wrapped everything in my body tags in the div wrap thing. However, i'm not at school anymore, so I can't check with that screen resolution :/ Hopefully it worked

Edit: Okay, I went to browsershots.org, and in EVERY screenshot, everything is shifted to the right. So it didn't work :/ Here are my screenshots :/

Thread: Position code mess ups according to screen size...

Thread Tools

Search Thread

Position code mess ups according to screen size...

Bookmarks

Bookmarks

Posting Permissions