Hi,
I'm trying to have a 2 column width layout with the right column smaller than the left. I have attempted to do this myself, but something keeps going wrong and I was wondering if someone could take a look and sort it all out for me?
Here is my Style.css
Here is my index.html
Content2 does not work. If I type in the box and it will just go below content one, and it never fills the empty gap which I want it too.
Here is a preview of the site:
http://www.deadandwalking.com/media/
I'm trying to have a 2 column width layout with the right column smaller than the left. I have attempted to do this myself, but something keeps going wrong and I was wondering if someone could take a look and sort it all out for me?
Here is my Style.css
Code:
body {
background: #000000 url(http://www.deadandwalking.com/media/mediabg.png) repeat;
background-attachment: fixed;
color: #ffffff;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
a:link {
color: #cc0000;
text-decoration: bold;
font-size: 16px;
}
a:visited {
color: #cc0000;
text-decoration: bold;
}
a:hover, a:active {
color: #cc0000;
text-decoration: bold;
}
#container {
color: #ffffff;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
.wrapper {
width: 80%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}
#logo {
background: #000000 top left repeat-x;
border-bottom: 1px solid #0f0f0f;
}
#content {
background:#000000 repeat;
background-attachment: fixed;
width: 70%!important;
padding: 20px 10px;
overflow: hidden;
float: left;
border-bottom: 5px solid #0f0f0f;
}
#content2 {
background:#0f0f0f;
width 20%;
padding: 20px 10px;
float: right;
border-bottom: 5px solid #0f0f0f;
}
#footer {
background: #0f0f0f repeat;
background-attachment: fixed;
width: 100%!important;
padding: 20px 10px;
overflow: hidden;
border-bottom: 5px solid #0f0f0f;
}
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 5px solid #ee9a00; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 5px solid #4f4f4f; /*right divider between tabs*/
color: #cc0000;
background: #0f0f0f; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: #cc0000;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: #ee9a00; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
#main {
float:left;
width:50%;
background:#000000;
}
#sidebar {
float:right;
width:30%;
background:#0f0f0f;
}Here is my index.html
Code:
<html>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title>Media Film Title</title>
<head>
<div id="container">
<div id="header">
<div id="logo"><img src="http://www.deadandwalking.com/media/firstlogo.png" /></div>
<div class="wrapper">
<br /><br />
<div class="mattblacktabs">
<ul>
<li><a href="http://www.deadandwalking.com/media/">Home</a></li>
<li><a href="http://www.deadandwalking.com/media/cast.html">Cast & Crew</a></li>
<li><a href="http://www.deadandwalking.com/media/banners.html">Banners</a></li>
</ul>
</div>
<div id="content">
<img src="http://www.deadandwalking.com/media/about.png" />
<br /><br />
A room full of X people, all with the same relentless motives of greed. After a woman is found dead winning a poker tournament, the search begins to find who really is most willing to commit murder for money.
</div>
<div id="content2">
</div>
<div id="footer">
Movie Written and Directed by Joe Fitzpatrick. Website Template design and theme by Joe Fitzpatrick. <a href="http://www.DeadandWalking.com/">DeadandWalking</a>.
</div>
</div>
</div>
</head>Content2 does not work. If I type in the box and it will just go below content one, and it never fills the empty gap which I want it too.
Here is a preview of the site:
http://www.deadandwalking.com/media/
