Is there a way to prevent elements from moving when the browser is resized? When I make the browser window smaller, everything shifts position towards the left, causing text to overlap with the menu bar. Is it possible to keep everything in place even when resizing the window?
Here's the beginning of my HTML code:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/alternativeCSS2.css"
title="bigsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS2.css" title="mediumsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS3.css" title="smallsheet"/>
<link rel="alternate stylesheet" type="text/css"
href="css/alternativeCSS4.css" title="specialsheet"/>
<script type="text/javascript" src="script/CTEC1800-Stylesheets(4).js" >
</script>
<title>Historical Pioneers</title>
</head>
<body onload="chooseStyleBySize()">
<div id="layout">
<div id="swapping">
<p>
<select onchange="setActiveStyle(this.value)">
<option value="bigsheet">For big pages</option>
<option value="mediumsheet">For medium-sized pages</option>
<option value="smallsheet">For small pages</option>
<option value="specialsheet">For special pages</option>
</select>
</p>
</div>
<div id="header">
<h1 id="logo"><img src="img/logo.png" width="200px" height="70px"
alt="logo" /></h1>
</div>
</div>
<div id="nav" class="box">
<ul class="nav">
<li id="active"><a href="home.html">Home</a></li>
<li><a href="Hitlers Biography.html">Adolf Hitler's Biography</a>
</li>
<li><a href="Winston Churchill.html">Winston Churchill's
Biography</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="Contact Us.html">Contact</a></li>
</ul>
</div>
<div id="container" class="box">
<div id="intro">
<div id="intro-in">
<h1>60 million men fought in 'The War to End All Wars', It ended
nothing..</h1>
<p class="intro">
"Putting history in it's place". For many years we have been
collecting, researching and interpreting historical information from the
World War 2, How the key figures including Adolf Hitler and Franklin D.
Roosevelt influenced this great war between 1939 to 1945.
Some information that was not yet looked into properly that
was very well important and how it all began in the first place.
</p>
</div>
<div id="hr">
<hr />
This is my CSS Code:
/*--------------------- Main Body --------------------- */
* {
margin: 0;
padding: 0;
}
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset,
legend, dl, dt, dd, blockquote, applet, object {
border: 0;
}
p {
margin: 15px 0;
}
body {
padding: 0;
background-color: #ededed;
background: #fff url("../img/bg1.jpg") repeat-y;
font: 0.8em/1.5 "arial", sans-serif;
color: #354146;
text-align: center;
width: 100%;
}
#layout {
}
#header{
text-align: left;
margin-left: 30px;
}
#swapping{
text-align: left;
margin-left: 45px;
}
#container{
margin-left: 40%;
clear: both;
width: 100%;
}
/*--------------------- Horizontal Navigation Menu --------------------- */
#nav {
margin: 0;
height: 100%;
margin-top: 20px;
}
#nav ul {
list-style-type: none;
width: 14%;
min-width:265px;
height: 100%;
clear: both;