I am extremely new to programming and I am attempting to code a website currently. I've spent about 5 hours in the last 2 days just trying to get things to line up correctly on various browsers and I'm having a few issues. First, let me say that I'm sorry if this question has been answered somewhere before. I've looked at a lot of solutions to problems similar to mine and nothing has completely worked for me, so please be patient. First, I have the problem of things appearing in random places on different browsers. When I attempt to remedy this in the CSS, I spawn new problems in other browers. Secondly, as the browser window changes size, all the elements on the page start moving around and overlapping instead of just hiding outside of the window. My third issue I'm having (sort of) is that my code looks terrible. I'm not sure why some elements have to have -4.5% margins to line up with other elements that need -5% margins; and I'm not sure why I'm having to put negative margins on certain elements to begin with! Thank you in advance for all of your help and preventing me from going postal.
Josh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horton Computer Solutions Home</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="site_title", style="float:left">
<span class="titleleft">Horton</span>|<span class="titleright">Computer Solutions</span>
</div>
<div id="title_bar", style="float:right">
<ul>
<pre><a href="#">Home</a> <a href="#">About Us</a> <a href="#">Services</a> <a href="#">Guarantee</a> <a href="#">Blog</a> <a href="#">Contact</a></pre>
</ul>
<br style="clear:both"/>
</div>
<div id="mainContent">
<div id="subContent1">
</div>
<div id="subContent2">
</div>
<div id="subContent3">
</div>
</div>
</div>
</body>
</html>
And the CSS
/* language: css */
BODY
{
font-family: Calibri, Arial, Helvetica, "Helvetica Neue", "Times New Roman";
font-size: 16px;
color: #FFF;
text-align: left;
background-color: #062134;
margin: auto;
padding: 20px 0 60px;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
A
{
font-family: Helvetica;
}
DIV#title_bar UL A
{
text-decoration: none;
color: #FFFFFF;
}
DIV#title_bar UL A:hover
{
text-decoration: underline;
color: #FFFFFF;
}
DIV#title_bar UL A:visited
{
text-decoration: none;
color: #FFFFFF;
}
DIV#site_title
{
font-family: Helvetica;
font-weight: bold;
font-size: 27px;
color: #FFFFFF;
margin: -4.5% 0 0 6.9%;
}
DIV#title_bar
{
font-family: Helvetica;
font-size: 16px;
color: #FFFFFF;
list-style: none;
margin: -5% auto auto 40%;
text-align: center;
position: absolute;
}
DIV#contentBox
{
background-color: #1468A8;
border-style: none;
width: 338px;
height: 185px;
padding: 19px;
}
#site_title .titleleft
{
color: #FFFFFF;
}
#site_title .titleright
{
color: #46C8FF;
}
DIV#mainContent
{
border: 1px solid #FFFFFF;
/*+box-sizing:border-box;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 950px;
height: 1135px;
background-color: #FFFFFF;
margin: 10% 6%;
padding: 15px;
}
DIV#subContent1
{
color: #FFFFFF;
width: 292px;
height: 255px;
background-color: #000000;
margin: 440px 0 0;
}
DIV#subContent2
{
color: #FFFFFF;
width: 292px;
height: 255px;
background-color: #000000;
margin: -255px 0 0 313px;
}
DIV#subContent3
{
color: #FFFFFF;
width: 292px;
height: 255px;
background-color: #000000;
margin: -255px 0 0 626px;
}
#site_title .floatleft
{
float: left;
position: relative;
left: 0px;
top: 0px;
}
#title_bar .floatright
{
float: right;
position: relative;
left: 0px;
top: 0px;
}