CODEWITHSUNDEEP
htmlcsscross-browserresize
THarps22
THarps22

Reputation: 1

main content DIV is drifting upwards when browser is resized

I am new to building websites and CSS, but am working on a project at http://www.profootballschedules.net. I want to address a couple of formatting issues with divs. Tried to look up other questions on here but nothing seemed to work. If you'd like me to upload any code, please let me know, as I am very new to this whole process.

First, when resizing the browser, you'll notice that the main text heading drifts up above the allotted paper area, and doesn't stay level. Not sure how to fix that - tried to tweak positioning to absolute on some of the divs containing the text, but it didn't do anything. Also, I'd like to be able to resize the window and scroll around from left to right, but I can't get that to work either. I tried overflow on the body and some of the main divs, but no dice.

While you're looking, if you have any suggestions for increasing cross-browser compatibility, I would appreciate it.

Upvotes: 0

Views: 172

Answers (2)

Ricardo Nuñez
Ricardo Nuñez

Reputation: 989

You are using % for the padding-top in the .site-main class. Switch to pixels.

.site-main {
    bottom: 0;
    height: 600px;
    left: 0;
    margin: auto;
    padding-top: 100px;
    right: 0;
    top: 0;
    width: 926px;
}

Also, you have overflow: hidden; that's removing the scrolling.

UPDATE:

Fix the wrapper %. 

.site {
    margin: auto;
    min-width: 960px;
    overflow: auto;
    position: relative;
}

Upvotes: 1

Timothy Smith
Timothy Smith

Reputation: 848

Use px instead of % for the padding-top in .site-main. To enable scrolling, get rid of overflow:hidden and the display:fixed in .site.

That'll be a good start.

Upvotes: 0

Related Questions