HTML/CSS: How to make web page stay put when resizing browser window?


Tags: html,css,web,browser

Problem :

(Macbook 10.5.8; Safari 5.0.6)

Hello, I'm making a website (using MAMP as localhost and Symfony2). However, evertime I resize my browser window, the elements in my web page keep squishing together and going out of place. How do I make it stagnant when resizing the window? I expect it to look like it's "cut off" when resizing. I did not add anything to my code to fix the error because I am a total HTML/CSS beginner.

However, I did find something like overflow:hidden. I tried applying it to my CSS body like so:

body {
    overflow: hidden;
}

but nothing happened.

UPDATE

(HTML)

<body>
<div class="container"><img class="header" src="http://www.ushistory.org/data1/images/slide3.jpg"/>
    <div><h1>APUSH Buddy</h1></div>
    <a class="buttons" id="homelink" href="">Home</a>
    <a class="buttons" id="termslink" href="terms">Terms</a>
    <a class="buttons" id="listlink" href="presidentslist">President's List</a>
    <a class="buttons" id="linkslink" href="links">Links</a>
    <a class="buttons" id="songlink" href="song">President's Song</a>
    <a class="buttons" id="forumlink" href="http://troyapushkorum.forumotion.com/login">APUSH Forum</a>
    <a class="buttons" id="somelink" href="">Something</a>
    <h1>President's List Quiz</h1>
    <p>Click on a president to take a mini fill-in-the-blank quiz!</p>
    </div>
</body>

(CSS)

.container {
width: 960px;
}
.buttons {
width: 13%;
line-height: 200%;
vertical-align: middle;
border-radius: 15px;
text-align: center;
text-decoration: none;
position: absolute;
font-size: 130%;
color: black;

}

It worked, but the hyperlink buttons still don't respond to "container". Btw I didn't want to post all my code because there's just too much.



Solution :

Put your content in a div with a fixed width as shown below:

HTML:

<div class="container">
// your code
</div>

CSS:

.container {
 width: 1000px;
}

    CSS Howto..

    CSS: How to change css class of li in a navigation

    How do I uncollapse a margin?

    How to use CSS transition to animate dropdown menu?

    How to make a different flip animation using CSS?

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    CSS: How to set 100% width on the first li of ul

    How to solve this (seemingly simple) formatting problem in CSS?

    gulp-cssmin: How to change relative URLs in minified CSS

    How to use a full width image as border between content and footer

    How does Materialize icons work? [duplicate]

    IE11 CSS bug with clear:right - how to workaround?

    CSS / bxSlider: How to avoid that Images are overlapping parent div

    How to change a span to look like a pre with CSS?

    how to order CSS elements?

    How to remove left and right margin on first and last div

    How to apply css to particular selected child in ivh-treeview?

    How to put the text at the center of inner div?

    How to bump up text?

    How to wrap table cell at a maximum width in full width table

    Prevent div from showing after slideUp() - jQuery

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    How do you make 2 different views for logged in/not logged in like facebook's newsfeed/login pages?

    How do I make my links be next to each other in CSS/HTML?

    How to make a drop-right menu?

    How to load css into html dynamically?

    How to reduce the wiDth of dropdown-menu?

    How can I create a horizontal selector in a form with only html and css?

    How to change or disable the alternating background colors in Google Prettify

    How to target CSS link with JavaScript

    how to make vertical progress path using css