[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Positioning on pages of my werbsite

Posted on 2011-05-02
10
Medium Priority
?
262 Views
Last Modified: 2012-06-27
Hello Experts,

I have a layout issue with three pages on my 15 page website. It seems that these three pages:

http://justthedriver.com/contact/contact.htm

http://justthedriver.com/employment/employment.htm

http://justthedriver.com/information_links/information_links.htm

Are all centered about 10px to the right of the rest of the pages in the site. I'm not sure what I did. I must have incorrectly specified a width or layout property in the column_r <div> ?

Please advise how to get these pages above to layout the same as the rest of the site, ie, when I click from the 'home page' to 'contact us', the container <div> shouldn't move approx 10px to the right.

Thanks!
0
Comment
Question by:TonyT7220
  • 4
  • 4
9 Comments
 
LVL 6

Expert Comment

by:cfEngineers
ID: 35507147
Open your browser in full screen and see if they still shift.  If not, it is because the length of you content causes a scroll bar to appear on a few of the pages.  I am testing it with FF in full screen, and it appears to stay static.
0
 
LVL 10

Accepted Solution

by:
GeoffSutton earned 2000 total points
ID: 35507167
Your problem is the scrollbar on the right.  Whenever your page is longer than the screen height the scrollbar appears and pushes everything to the left by the width of the scollbar :)  Try using position:absolute on the container class.  That may resolve it for you.

Good luck,

Geoff
0
 

Author Comment

by:TonyT7220
ID: 35507321
Oh, that old chestnut? I thought I fixed that a while ago, thanks Geoff, let me try that.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 10

Expert Comment

by:GeoffSutton
ID: 35507325
Hope it's a simple fix for you :)
0
 

Author Comment

by:TonyT7220
ID: 35507363
html {height: 100%; margin-bottom: 1px; overflow-y: scroll;
} /* This forces a scrollbar on short pages in Firefox, */

This is what I did on a previous site
0
 
LVL 10

Assisted Solution

by:GeoffSutton
GeoffSutton earned 2000 total points
ID: 35507390
It does, but an "empty" scrollbar is ugly (IMO).  Maybe something like .container {margin:15px auto; width:100%;...} ?
That should leave you the space for a scrollbar to appear/disappear as needs be without affecting the positioning of your page.
0
 
LVL 10

Expert Comment

by:GeoffSutton
ID: 35507408
Uhhmmm...  The user requested a solution as to why the page data was shifting.  The solution was given along with samples as to how to solve the problem.  I believe that points should be awarded accordingly, as the user did not answer his own question, merely posted another comment to use as a solution.
0
 

Author Comment

by:TonyT7220
ID: 35514031
I used the solution that I posted, Geoff reminded me of that solution. As such, I'm happy to split the points with him.
0
 

Author Closing Comment

by:TonyT7220
ID: 35514039
The fixed I used was HTML from a previous site of mine with the same issue.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to dynamically set the form action using jQuery.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question