I'm trying to make a simple 2 column layout as a way to start learning CSS/XHTML and to start getting ready to free lance. I'm already running into troubles however, it seems this doesn't view correctly when I preview it in mozilla fire fox. I don't have hosting yet, as I'm trying to build my site before I actually make the investment.
My guess I'm just not defining something right, or it's the fact that I'm using precentages with no actual width defined for the wrapper? I don't know.
The problem is that the main content goes under the side bar, not completely under, the sidebars right-bottom corner is touching my main contents left-top corner.
Any ideas would be greatly appreciated.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>myblog|admin</title>
<style type="text/css">
body {
font-family: Trebuchet MS, Verdana, Arial;
font-size: 12pt;
background-color: #C0C0C0;
padding: 20%
}
#header1 {
background-color: #FA5858;
border-color: #FA5858;
font-family: Trebuchet MS, Verdana, Arial;
font-size: 12pt;
padding: 2px;
width: 100%;
}
#header{
background-color: #FFF;
font-family: Trebuchet MS, Verdana, Arial;
font-weight: bold;
font-size: 20pt;
padding: 4px;
color: #000;
width: 100%;
}
#sidebar{
float: left;
font-family: Trebuchet MS, Verdana, Arial;
background-color: red;
width: 20%;
padding: 2px;
}
#content {
float: right;
font-family: font-family: Trebuchet MS, Verdana, Arial;
background-color: green;
padding: 2px;
width: 80%;
}
#wrap {
background: #FFF;
margin: 0 auto;
width: 800px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header1">Welcome back, Jon! </div>
<div id="header">myblog | home</div>
<div id="sidebar">test</div>
<div id="content">TEST!Z</div>
</div>
</body>
</html>
