locked
website page-browser window sizing problems RRS feed

  • Question

  • I am in the finishing stages of completing my website www thegiftoflife and as an intermediate beginner :) am having trouble putting code in that gives me the page sizing parameters I would like. I have a surrounding Allbox containing a Menubox (width set to 252PX), Contentsbox, and Bibliographybox (has overflow:hidden). 3 questions, all concerning sizing of a/my webpage in browser windows;

    1. I would like to set the length of my surrounding Allbox to margin-bottom:auto or the length of the box to a percent of the browser window. When I try to set either of those parameters my Bibliographybox (extensive bibliography) no longer stays overflow:hidden but opens up. I need the bottom border to stay within the browser window to be able to see Bibliography results in the Bibliographybox window.

    2. I would like to be able to set the width of the site by having my Contentbox and Bibliographybox area resize (margin-right:auto, margin-left:auto) itself in relation to my 252px Menubox and do so automatically as I change the width of the Allbox container. It does not seem to want to/I do not know how to do that. margin-right:auto seems to do nothing?

    3. Is there any way to conditionally set a website's page size to the browser window size receiving it or have a dropdown box allowing user to choose a correct fit? Not likely a beginners level task I assume!

    Thanks ahead of time. I have found this site invaluable in my learning curve.

    lifeisagift

    David

    Tuesday, December 3, 2013 9:18 PM

Answers

  • OK, I'm still not positive what it is you want to do, but here's my guess, based upon what you've said and what your current site looks like. (BTW, the site is w-a-a-y too wide—on my 1366px wide screen I have to scroll back and forth, back and forth, playing visual ping-pong, to read your body content. This is something that neither I nor your visitors are willing to endure.) Allbox is currently set to a 1400px width, which is far, far too wide

    If what you want is a fixed-size sidebar menu, with a content section that is free to vary in width, depending upon the width that you assign to your wrapper div (Allbox), and you want your wrapper div to vary in width depending upon the browser viewport, so that people don't have to horizontally scroll, no matter what their browser viewport size, then this is what you do...

    Set Allbox's width to a percentage, say, 80%:

    #Allbox {
       width:80%;
       margin:0 auto; /* This centers the page (Allbox) within the viewport */
       max-width:1200px; /* Prevents width too wide for comfortable reading */
    }

    Give Contentbox and Bibliographybox a left margin of 252px, but assign NO width. Since Menubox is floated left, they will automatically try to fill the horizontal space remaining within Allbox, so that will allow them to automatically expand and contract as Allbox does, depending upon the visitor's browser viewport width.

    As far as the bottom margin is concerned, I still can't grok what you're trying to achieve...

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by lifeisagift Thursday, December 5, 2013 1:58 AM
    Tuesday, December 3, 2013 11:27 PM

All replies

  • David,

    It sounds like you are taking the wrong approach.  You do not want your webpage to fill a browser window, no matter what size the browser window is.  Trust me, what looks good on a small screen looks awful stretched out on a large widescreen.  (Also, long text lines are extra work to read.  Lines need to remain a comfortable length across.)  From your description, I don't think you know what "auto" means in CSS.  margin-right:auto and margin-left:auto do not change the width of your content.

    To be more specific in any responses, you need to supply your actual site address so we can see what you've done.  The site you posted above (thegiftoflife) does not exist as a .com site, and if it's something else, you need to tell us.


    • Edited by KathyW2 Tuesday, December 3, 2013 10:12 PM
    Tuesday, December 3, 2013 10:10 PM
  • KathyW2,

    Yes, sorry; www thegiftoflife.info  I really do not want the whole page (container Allbox) to go the whole width of the window. I want the Contentbox and Bibliographybox containers inside the Allbox container to auto size to whatever size I make the Webpage (to accommodate the containing Allbox set size). With the Menubox set at 252PX I would like the other containers to auto expand to the size I set the Allbox container-within it.

    The question about the bottom of the page concerns wanting to set that parameter to a percent of the page-say 95% to be able to see the Bibliography box above taskbars and other lower screen stuff. When I try that or margin-bottom:auto my hidden bibliography expands out of the Bibliographybox.

    David

    Tuesday, December 3, 2013 10:27 PM
  • OK, I'm still not positive what it is you want to do, but here's my guess, based upon what you've said and what your current site looks like. (BTW, the site is w-a-a-y too wide—on my 1366px wide screen I have to scroll back and forth, back and forth, playing visual ping-pong, to read your body content. This is something that neither I nor your visitors are willing to endure.) Allbox is currently set to a 1400px width, which is far, far too wide

    If what you want is a fixed-size sidebar menu, with a content section that is free to vary in width, depending upon the width that you assign to your wrapper div (Allbox), and you want your wrapper div to vary in width depending upon the browser viewport, so that people don't have to horizontally scroll, no matter what their browser viewport size, then this is what you do...

    Set Allbox's width to a percentage, say, 80%:

    #Allbox {
       width:80%;
       margin:0 auto; /* This centers the page (Allbox) within the viewport */
       max-width:1200px; /* Prevents width too wide for comfortable reading */
    }

    Give Contentbox and Bibliographybox a left margin of 252px, but assign NO width. Since Menubox is floated left, they will automatically try to fill the horizontal space remaining within Allbox, so that will allow them to automatically expand and contract as Allbox does, depending upon the visitor's browser viewport width.

    As far as the bottom margin is concerned, I still can't grok what you're trying to achieve...

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by lifeisagift Thursday, December 5, 2013 1:58 AM
    Tuesday, December 3, 2013 11:27 PM
  • Thanks, you address exactly what I want to achieve in width (and height-see below). This can help others reading this to achieve a somewhat 'fluid' width with a set limit to avoid text expanding in a line across a giant screen. I set the parameters as you suggested (255 px for the Contentbox and Bibliographybox-includes borders). Unfortunately it pushes those boxes out of the Allbox. This is a similar problem to what happens when I set the height to say, 95% or auto.

    The height (bottom margin) issue is just that. When set to auto or a percent it not only pushes the Contentbox and Bibliographybox out of the Allbox but the Bibliographybox (set with overflow:hidden) opens up all down the page. You have bulls-eyed with your response exactly what I am trying to achieve in the width (and also height) of my page. I just have not been able to place parameters that keep the Contentbox and Bibliographybox inside the Allbox and also not have the Bibliographybox remain with overflow:hidden.

    David

    Wednesday, December 4, 2013 4:18 PM
  • paladyn,

    Got your width parameters to work by removing float:left from the contentbox and Bibliographybox. They adjust now no matter what size (percent; width-min) is placed on width. Thank you so much.

    Still having the same problems as before with height. When height:auto; or height:percent (say 100/%) is placed on the Allbox height parameter my Contentbox AND Bibliographybox assume that parameter. It is as if that parameter is passed down from the Allbox? I can set a specific height and all is well with everybody staying in place and over:hidden working for the Bibliographybox, but put auto or 100% in the Allbox height parameter and both containers expand-but they do now stay in place?

    David

    Wednesday, December 4, 2013 9:49 PM
  • I have NO idea what you have done at this point. The site is still far too wide, so you have not set Allbox to 80%, or it would only take up 80% of my browser viewport, and it doesn't. And I don't know what the hell you're doing with your heights, but at present, the vertical scrollbar thumb has no relationship to the size of the page, leaving portions of the page completely inaccessible using the scroll bar, requiring using the up/down arrows to view the entire page.

    Here's a basic rule of thumb for Web development—Do NOT assign heights to text containers! Period! Never, not ever! Capisc'? Web pages should be designed to expand downward gracefully, to accommodate vision-impaired users and those using small, high-res screens who increase text size for readability.

    You are trying to emulate the experience of a printed page, and you CANNOT do that on the Web. Your users have a degree of control over their own browsing experience never available to readers of a printed page. And you, as the developer, are under constraints not experienced by a print typographer.

    Your current design is non-standard, effectively inaccessible, has poor usability, is confusing, is horribly non-responsive when viewed on a mobile device, and is almost guaranteed to induce anyone who stumbles upon your site to click away as quickly as possible. Forget about trying to make everything appear to be contained within a rectangle—it's NOT a printed page, and never will be. You've got other page elements that fly in the face of Web convention, such as blue, underlined section headers that are NOT hyperlinks! Here's a clue—on the Web, underlined text is presumed to be a hyperlink, and confusing your visitors is a surefire way to get them to leave your site.

    Instead of having that bibliography (actually citation) section, which leaves the reader with no effective way to return to where he was in the page, use one of the many free javascript/jQuery "Tooltip" plugins to pop up the citation in situ, which would allow the reader to see the reference, act upon it or dismiss it, and then to return to reading without disruption. Also, warn your visitors when a link opens in a new tab/window, using a title attribute or other mechanism (e.g. parenthetically). This can cause serious results—when your page is viewed in Safari (ALL Apple/iPhone/iPad/iPod owners, many PC users), every single one of those target="_blank" links will open, not a new tab, but an entirely new browser instance! You're not going to win any friends with behavior like that, and will only provide further incentive for visitors to leave as quickly as possible. Even those using other browsers will quickly become incensed as the number of open tabs increases without bounds, and precludes using the "Back" button to get back to where they were.

    David, this is the Web, NOT the printed page. Get that out of your head, and instead of trying to enforce print conventions, as you are now, embrace the Web and take advantage of its unique capabilities. Your site is unusable and unfriendly as it is now constituted, and you should redesign it from scratch, completely discarding any print conventions that you are burdening the current site with.

    cheers,
    scott.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Thursday, December 5, 2013 12:21 AM
    Wednesday, December 4, 2013 10:46 PM
  • Appreciate the help given and suggestions. I will need to consider your thoughts on target="_blank" links as well as text boxes with height parameters. I still wish my main containerbox could accept parameters to auto size to 90-95% of the viewport without affecting my contained <div>'s. It would solve having to scroll 2 separate places-the
    viewport and the page. The width suggestions solved that problem. Mobile devices were something I was going to tackle when I got a functioning site going. The information from this forum is always helpful and thought provoking. EW4 is a great program to work with. <o:p></o:p>


    David

    Thursday, December 5, 2013 2:26 AM