Elements Not Aligning

[Kage Kazumi]

I can't get my elements:

<div>
<p>
<span>

To align correctly. They look aligned in Dreamweaver durring "split" view:



However, if you choose "live view" or view it in a web browser it looks like this: http://zanime.net/list/; unaligned.

How can I fix this?

CSS (HTML below)

@charset "UTF-8";
/* CSS Document */
#table{
	width:500px;
	height:inherit;
}
.table-title{
	width:inherit;
	height:inherit;
}
.text-wrapper{
	width:inherit;
	height:inherit;
}
.title-text{
	width:200px;
	height:16px;
	float:left;
	padding:2px;
}.os-icons{
	width:200px;
	height:16px;
	float:right;
	text-align:right;
	padding:2px;
}
.table-description{
	width:inherit;
	height:145px;
	padding:1px;
	margin-top:1px;
}
.description-thumb{
	width:100px;
	height:100px;
	float:left;
	margin-right:15px;
	padding-left:5px;
}
.table-text-description{
	width:475px;
	height:100px;
}
.table-footer{
	width:inherit;
	height:15px;
	padding:2px;
}
.table-type{
	width:200px;
	height:inherit;
	float:left;
	padding-bottom:2px;
}
.table-price{
	width:200px;
	height:inherit;
	float:right;
	text-align:right;
	padding-bottom:2px;
	padding-right:2px;
}

HTML

<div id="table">
       <div class="table-title">
          <p class="title-wrapper">
             <span class="title-text">Software Name</span>
             <span class="os-icons">
                <strong>OS</strong>:
                <img class="windows" src="images/windows-logo-icon.png" />
                <img class="mac" src="images/mac-logo-icon.png" />
                <img class="linux" src="images/linux-logo-icon.png" />
             </span>    
          </p>
       </div>
       <div class="table-description">
             <p class="description-thumb">
                <img src="images/sample-image.jpg" />
             </p>
             <p class="table-text-description">
                The graphical scripter within 001 Game Creator is a simple, yet powerful method of creating events for your game without the difficulty of learning to write code. It uses the simplicity of pointing and clicking to allow the user to easily implement events in the form of a flowchart.
             </p>
       </div>
       <div class="table-footer">
             <span class="table-type">2D | 3D</span>
             <span class="table-price">Free/Commercial</span>
       </div>
    </div>

[ajfmrf]

<link rel="stylesheet" type="text/css" href="css/style.css">gives a "404 Not Found" error

You need to fix the url and that may be all you need to do

[Kage Kazumi]

<link rel="stylesheet" type="text/css" href="css/style.css">gives a "404 Not Found" error

You need to fix the url and that may be all you need to do

That CSS files doesn't exist yet...or more like it is empty anyway.

Edit

The style.css is empty. It will be the design portion (color & any images). The layout.css is the one not working right... because I messed something up.

[ajfmrf]

Is this more what you are looking for:
http://www.web-user.info/test/untitled1.html

If it is just check the adjustments in the css page

[Kage Kazumi]

Yes, however, now my background image is pushing elements down instead of putting them on top of the background image: see here

v/Respectfully,
Kage

EDIT: Never Mind.