CSS Positioning Help

[TimBob12]

Hi there,

I hate CSS and I completely suck at design but unfortunately CSS is necessary for any kind of decent page design. I have been working on a small custom CMS for a personal website which works fine. However once I started to try and create the page design many problems arose.

http://tim-thompson.comuf.com/index.php?id=1

The one problem I can't seem to get rid of is that when I head onto the portfolio page the entire page seems to shift left slightly and it is really annoying me. Any help that can be given would be greatly appreciated.

Apologies for such a rubbish host I just uploaded it to the first one I found.

I will also post my code down below for people to take a look at.

My CSS code is a mess so any help or advice on how to clean it up would be greatly appreciated.

Thanks in advance

Tim

STYLE.CSS

body {
background-image: url('images/bg.png');
font-family: "Trebuchet MS", arial;
}

#header{
margin-left: auto;
margin-right: auto;
width: 960px;
padding-bottom: 7px;
}

#menu{
background-image: url('images/menu.png');
margin-left: auto;
margin-right: auto;
width: 940px;
font-size: 150%;
padding-left: 20px;
}

a:link {
text-decoration:none;
color: #ffffff;
}

#content a:link {
text-decoration:none;
color: #9E9E9E;
}

a:visited {
text-decoration:none;
color: #ffffff;
}

#content a:visited {
text-decoration:none;
color: #9E9E9E;
}

a:hover {
text-decoration:none;
color: #000000;
}

#content a:hover {
text-decoration:none;
color: #1FAFBF;
}

a:active {
text-decoration:none;
}

#menu td{
padding: 0px 15px 2px 15px;
}

#page{
background-image: url('images/content.png');
margin-left: auto;
margin-right: auto;
width: 960px;
margin-top:10px;
padding-bottom: 10px;
}

#title{
padding-left: 36px;
padding-right: 40px;
padding-top: 15px;
font-size: 200%;
}

#content{
padding-left: 38px;
padding-right: 40px;
padding-top: 5px;
}

#content img{ 
max-width: 95%; 
}

#footer{
text-align: center;
margin-top: 25px;
font-size: 80%;
}

.portfolio {
background-color:#f7f7f7;
border: 2px solid;
border-radius: 15px;
height: 120px;
margin: 20px 0px;
}

.p_image{
margin: 10px 10px;
max-width: 95%;
position: relative;
top: -25px;
margin-right: 25%;
}

.portfolio:nth-child(odd){
background-color:#ffffff;
}

.p_title{
text-decoration: underline;
font-size: 125%;
position: relative;
top: 5px;
right: -170px;
max-width: 95%; 
}

.p_summary{
position: relative;
top: -105px;
right: -170px;
margin-right: 25%;
}

.p_links{
position: relative;
top: -120px;
right: -170px;
}

PORTFOLIO.PHP (Relevant Sections)

<div id = "page">

            <div id = "title">
                Portfolio
            </div>

            <div id = "content">

            <? 
                if(isset($_REQUEST["id"]))
                {
                    print $result["title"];
                    print "Language - ";
                    print $result["language"];
                    print "<img src = \"images/";
                    print $result["image"];
                    print "\" />";
                    print "";
                    print $result["content"];
                }
                else
                {
                    $sql = "SELECT * FROM portfolio";
                    $query = mysql_query($sql, $conn);

                    while($row = mysql_fetch_assoc($query))
                    {


                        print "<div class = \"portfolio\">";

                            print "<div class = \"p_title\">";
                                print $row["title"];
                            print "</div>";

                            print "<div class = \"p_image\">";
                                print "<img src = \"images/";
                                print $row["image"];
                                print "\" width = 150 height = 100 />";
                            print "</div>";

                            print "<div class = \"p_summary\">";
                                print $row["summary"];
                            print "</div>";

                            print "<div class = \"p_links\">";
                                print "<a href = \"portfolio.php?id=";
                                print $row["id"];
                                print "\">View</a>";
                            print "</div>";
                        print "</div>";
                    }
                }
            ?>


            </div>
        </div>

[pixelsoul]

I checked it in 3 different browsers and I am not seeing a shift, it is centered for me. The only possible way I can see it shifting a bit is if the content extended past the fold on the bottom of my screen and a scroll bar was enabled on the browser, which would add a few pixels to the right of the screen.

[TimBob12]

I've tried it in Chrome and Firefox on two different screen resolutions and sizes and i am definately getting the shift. It's only by a few pixels.

How would I go about fixing the problem you mentioned?

[pixelsoul]

You might have to post a screenshot of the shift you are seeing if no one here can see it.

What I described with the scrollbar isn't really a problem, it is just normal browser behavior. If you are on a page that doesn't extend passed the fold then it the browser hides the scrollbar on the right. But if you navigate to a page where the content of the page extends passed the fold then the browser puts in the scroll bar so you can scroll down the screen.

[TimBob12]

Get what you mean now >< Been a long week.

http://i.imgur.com/gkiLmGf.png

The portfolio page was mades slightly transparent which hopefully shows the shift.

[pixelsoul]

Yup, just an adjustment for the browser slipping in the scrollbar for the longer content which is completely normal, nothing wrong with your CSS in that regards. But, if it is really driving you nuts and you don't want that to happen, you can just do something like this:

body {
background-image: url('images/bg.png');
font-family: "Trebuchet MS", arial;
overflow-y: scroll;
}

[TimBob12]

You have no idea how much I love you right now :P

Thnak you Thank you Thank You!!