daytona10 Posted April 24, 2012 Share Posted April 24, 2012 (edited) Take a look at the code first, HTML: <div id="center"><div id="center-left"><img src="images/front-pg.png"/> <div class="p-left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et sodales nibh. Sed facilisis sodales nulla ac vestibulum. Aliquam mi leo, sagittis ut suscipit ac, fringilla in velit. Phasellus dignissim lectus quis augue venenatis fringilla. Aenean elementum, diam vel lobortis malesuada, ipsum libero ultricies tellus, in lobortis augue purus non velit. Duis lectus augue, ultricies eu iaculis vitae, ultricies a risus. In dolor lorem, aliquam at viverra ut, tempor a tortor.</p></div><div class="p-right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et sodales nibh. Sed facilisis sodales nulla ac vestibulum. Aliquam mi leo, sagittis ut suscipit ac, fringilla in velit. Phasellus dignissim lectus quis augue venenatis fringilla. Aenean elementum, diam vel lobortis malesuada, ipsum libero ultricies tellus, in lobortis augue purus non velit. Duis lectus augue, ultricies eu iaculis vitae, ultricies a risus. In dolor lorem, aliquam at viverra ut, tempor a tortor.</p></div> </div></div> CSS: #center {width: 960px;background: white;overflow: hidden;}float: left;}#center-left {width: 640px;float: left;background: green;}#center-left h1 {padding-left: 45px;padding-right: 45px;font-size: 30px;color: #556279;}#center-left img {margin: 45px 45px;background: pink;}.p-left , .p-right {width: 275px;float: left;padding-top: 20px;}.p-left {margin-left: 45px;}.p-left p , .p-right p {width: 250px;font-size: 16px;color: #556279;} basically the #center tag is the main content for this page, on one page within the #center tag theres two column (#center-left, and #center-right) total width is 960px. I created another page with a similar set up but instead of the columns i deleted everything within the "center" tag and I expected the whole thing to be the same, well it is, but it shifts everything on the page 6px over to the right. I deleted the whole #center-right without problems, but when I deleted p-left and the image, it shifts that whole page 6px over. did I mess up somewhere in the css? Any Ideas? Edited April 24, 2012 by daytona10 Link to comment Share on other sites More sharing options...
eTianbun Posted April 24, 2012 Share Posted April 24, 2012 #center{width:960px; background:white; overflow:hidden;} float:left;} Link to comment Share on other sites More sharing options...
daytona10 Posted April 24, 2012 Author Share Posted April 24, 2012 #center{width:960px; background:white; overflow:hidden;} float:left;} whoops there's a mistake, but sadly that did not help the issue. Link to comment Share on other sites More sharing options...
daytona10 Posted April 24, 2012 Author Share Posted April 24, 2012 Solved it... Apparently this is an osx lion problem. With the introduction of the new scroll bars (which are 6px wide) if a page does is not big enough for scrolling, the side bar disapears..moving things to the right..by 6 pixels. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 24, 2012 Share Posted April 24, 2012 force scroll bar to always show with html {overflow-y: scroll; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now