smalldiffs Posted March 28, 2009 Report Share Posted March 28, 2009 Hi there, I am trying to get rid of the horizontal scrollbar on this site: http://genesis-boutique-travel.com/ I have been using firebug to better understand why it is turning up but the changes I have to make to get rid of it undermine the layout I am after. I would like the 'page' to align to the right of the browser window (with a margin of around 80px). More or less as it looks now I think but without that darn scrollbar.:/ Any suggestion of where I am going wrong would be much appreciated! thanks, D Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 28, 2009 Report Share Posted March 28, 2009 (edited) Your page container is:- #page { text-align: left; float: right; } but if you don't want a scrollbar you need to make this width: 100%; which means that it will not need float: right, and then make sure all other divs fit inside, either by giving them % widths or (if having text) not giving them a width so that they find their own width or allowing divs to move down to a lower level if there is not enough room at a small viewport resolution. Edited March 28, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
smalldiffs Posted March 28, 2009 Author Report Share Posted March 28, 2009 Thanks very much - though Im not sure it has really solved my issue... the reason I have the "float: right" for the page is because I want the whole 'page' content to align itself to the right of the browser (i.e. if the window size is increased the content will move out to the right away from the logo in the top left.) Is there something I am missing in your suggestion? Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 29, 2009 Report Share Posted March 29, 2009 If you want to avoid a horizontal scrollbar at all resolutions you need to use width: 100%; for the container, then use float: left for the logo and float: right for content to stick to the right, then width: 100% for the footer:- CSS (simplified):- #page { width: 100%; } #header { float: left; } #right-container { float: right; } #footer { width: 100%; clear: both; } HTML markup: ............ ....all right divs here... You will find that at small screen resolutions the right div may move down if there is not enough width next to the left header, so if you make the right-container and all divs inside have no width they will just get squeezed to a very small width, or if you give right-container a width, make sure that the total width of both divs is less than 770px so that at least it works in 800*600 reslolutions. Quote Link to comment Share on other sites More sharing options...
smalldiffs Posted April 1, 2009 Author Report Share Posted April 1, 2009 Hi Wickham, Apologies for the radio silence but I finally got a chance to explore your more detailed explanation which was excellent and though I still have a way to go (like getting my head around what "clear" is really for) this was a great help! Many thanks for taking the time to explain this simple concept clearly! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.