Databases
StackOverflow2013
Postsdbo
POAdjust scroll position relative to center on window resize?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdjust scroll position relative to center on window resize?
    primarykey
    data
    text
    <p>So basically I have 3 inline-block divs that are stacked horizontally as such:</p> <p>div1 -- div2 -- div3</p> <p>div1 and div3 are skyscraper ads, and div2 is my main content wrapper. The problem I had initially was that whenever I resized my window to make its width smaller than the divs' widths combined, div2 and div3 would wrap to the next line underneath div1, because they did not fit on the same line (same problem when viewing website from smartphone or tablet because they have small width), and div1 (an ad) would sit there awkwardly centered on the main page. I fixed that by adding <code>white-space: nowrap</code> to the body tag to prevent the divs from wrapping, and adding <code>white-space: normal</code> the content-wrapper div to prevent it inheriting from the body element so that the content text can wrap normally. This fixed the problem and now when I visit the website, the three divs are always on the same line regardless of the browser width, and there's a horizontal scrollbar if needed.</p> <p>However, the scrollbar always starts at the left side and so my content-wrapper (div2) which is my main content that should be centered is not. Instead div1 (ad) shows up first on the left side followed by the content-wrapper. How can I correct this situation? I know the divs will be centered just the way I want them if I were to get rid of the word-wrap on the body, but that would bring back the initial problem of the divs wrapping when they shouldn't. Is there anyway I can fix both problems using CSS?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USZhihao
    1. UShesson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAdjust scroll position relative to center on window resize?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAdjust scroll position relative to center on window resize?
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COI think I understood everything up until the last paragraph. Could you post a screenshot of what the problem is, as well as the CSS? Saying `white-space: nowrap` stopped the `div` elements being on separate lines gives me an *idea* of what you're doing, but I still don't actually know what's going on.
      singulars
      1. POAdjust scroll position relative to center on window resize?
      1. USZhihao
    2. COThis is the default behavior of the browser to show the left part of the page first (scroll position at leftmost). When you resize the window smaller, it must choose something to cut off, so it removes the rightmost part. I don't believe this is possible with pure CSS, since it sounds to me like you want to adjust the scroll position (relative to the scroll "space" instead of page position) as the user resizes the page. You'll probably need to rely on JavaScript for this.
      singulars
      1. POAdjust scroll position relative to center on window resize?
      1. USZhihao
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload