Question

I’m trying to get this webpage to look a bit more static.
On smaller resolutions the text will not fit inside of the div elements correctly.
The website is here: http://www.vidimortem.info/

Here is my CSS:

body {
   width: auto;
   background-color: #FFFFFF;
}
div  {
   border-radius: 0px 5px 5px 5px;
}

/* class identifiers */
.alignmentDiv {
   width: inherit;
   font-family: sans-serif;
   text-align: center;
   color: #000000;
 }

.headerDiv {
   background-color: #318B7C; 
   width: inherit;
   height: 40px;
   margin: auto auto; 
   border-radius: 15px; /* i'm currently hating how css3 hasn't fully been implemented to all themes so it doesn't colorize. */ 
   opacity: 0.8;
}
.sidebarDiv   {
   background-color: #748B31; 
   width: 40%;
   height: 220px; 
   padding: 1% 1% 1% 1%;
   display: inline-block;
   box-shadow: 3px 3px 3px 3px #ccc;
}
.linksDiv {
   background-color: #ACACAC; 
   width: 40%;
   height: 200px; 
   padding: 1% 1% 1% 1%;
   font-size: 14px;
   display: block;
   float: right;
   text-align: justify;
   box-shadow: 3px 3px 3px 3px #ccc;
}
.aboutDiv     {
   background-color: #468B31;
   box-shadow: 3px 3px 3px 3px #ccc;
   width: 50%; 
   height: 130px;
   padding: 1% 1% 1% 1%;
   margin: auto auto;
   margin-top: 3%;
   font-size: 11px;
   display: block; 
   text-align: justify;
}

a {
   color: #F92672;
   text-decoration: none;
   font-weight: bold;
}
a:hover {
   color: #FC689D;
   text-decoration: underline;
}

I want to make this as static as possible without altering the appearance substantially.
The HTML can be found here: http://pastebin.com/raw.php?i=L0xBLau2
Thanks in advance.

Answer 1

Change CSS this way:

body {
   width: 1070px;
   margin: auto;
   background-color: #FFFFFF;
}