I’m trying to get my website to keep its dimensions no matter how big or small you have your resolution set to. I was using percent signs as my width setter for each division. Unfortunately, when you resize your browser, it resets the size of the containers. Obviously, I don’t want to do this so I set the widths to pixels and it worked fine. 2 of my 3 containers no longer change size when I move the browser. However, the last one still moves and I can’t figure it out. Any ideas? I’ll upload the CSS here. The div is called Content. I’ve bolded the header above it.
/* Sets the background color for entire site */
body
{
background-color: white;
}
/* This will format the header */
#header
{
background-color: b0c4de;
text-align: center;
height: 300px;
width: 994px;
border:2px solid #003366;
}
/* These next sections will format the menu bar containing all the websites links */
#links
{
float:left;
text-align: right;
border-top:2px solid #ff6600;
width: 178.92px;
margin:0;
padding:.5px;
background-color:b0c4de;
}
#links a
{
font-size: 108%;
font-family: “Trebuchet MS”, sans-serif ;
float:left;
width:98.25%;
border:1.75px solid #003366;
color:white;
}
#links a:hover
{
background-color:#ff6600;
color:white;
text-align: center;
border:2px solid #003366;
}
/* This will align the footer on each page */
#footercontainer
{
float: right;
width: 994px;
text-align: right;
}
/* This will format the footer */
#footer
{
float: right;
text-align:right;
padding:0.5em;
color:black;
background-color:b0c4de;
font-size: 70%;
margin-left: auto;
margin-right:auto;
width: 400px;
}
/ This next section will format the content in the body of every page /
#content
{
text-align:left;
float:right;
font-size: 110%;
width: 785px;
border-top:2px solid #ff6600;
}
h1
{
text-align:center;
color:#003366;
text-decoration: underline;
}
h2
{
text-align:left;
color:#003366;
font-style: italic;
}
/* This will format specific pictures that need to be floated right. (I.E. Tokia pictures) */
#pictures
{
float:right;
}
/* This will format the blocks of text that want to stand out beyond their page. (I.E. Contact section on contacts.html) */
#standAlones
{
font-family: “Trebuchet MS”, sans-serif ;
color:#003366;
background-color: #b0c4de;
border:2px solid #ff6600;
width: 49%;
}
#standAlones a
{
color:#ff6600;
}
#standAlones2
{
font-family: “Trebuchet MS”, sans-serif ;
color:#003366;
text-align: right;
background-color: #b0c4de;
border:2px solid #003366;
}
#standAlones2 a
{
color:#ff6600;
}
#View_Examples img
{
border-bottom:2px solid #ff6600;
border-right:2px solid #ff6600;
}