CODEWITHSUNDEEP
htmlcsswebbrowser
Gretta
Gretta

Reputation: 243

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

(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.

Upvotes: 1

Views: 34682

Answers (1)

imbondbaby
imbondbaby

Reputation: 6411

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

HTML:

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

CSS:

.container {
 width: 1000px;
}

Upvotes: 3

Related Questions