Hey,

I've been working on this design, but I suck at layout. I've got this major problem with my navigation div. It wont float left the way I'd like. There must be something off about my numbers, or positioning. I was wondering if someone could help me get that to the left under my profile pic. (all information here is fake, just working on the first style of profile)..

Also mention that I'm horrible with layout. If anyone could help me clean it up, and make it more slick that would be awesome :)


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title> Profile</title>
<link href="mechanics/css/ffprofile.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="page">
<div id="searchbar">
<div id="searchbutton1"></div>
<div id="searchbutton2"></div>
<div id="searchbutton3"></div>
<input id="searchfield" type="text" />
<button id="searchbutton">Search</button>
</div>

<div id="profilepic"></div>

<div id="profilewrapper">


<div class="modulewrapper" id="playerwrapper">
<div id="mediaplayerdeck">
<div id="playerdeckimage" style="background-image: url('mechanics/stock/mediaplayer/media_player_deck.jpg')">

</div>
<div id="playertracklist"></div>
</div>
</div>



<div class="modulewrapper" id="basicinfowrapper">
<div>
<span class="moduleheader">Basic Info</span>
</div>
<div id="infopic1" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
<div id="infopic2" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
<div id="infopic3" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
<div id="infopic4" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
<div style="margin:12px;">
<div class="basicinfolabel"><span id="stagenameoutput">Pressence</span></div>
<div class="basicinfolabel"><span>Genre:</span><span id="genreoutput">Rap</span></div>
<div class="basicinfolabel"><span>Latest Album:</span><span id="latestalbumoutput">Micinitus</span></div>
<div class="basicinfolabel"><span>Website:</span><span id="websiteoutput">Home Site</span></div>
<div class="basicinfolabel"><span>Next Show:</span><span id="nextshowoutput">Dec 15th, 2014: Rock Bottom Pub, Wyoming.</span></div>
<div class="basicinfolabel"><span><b>Bio</b></span></div>
<div id="biowrapper" style="">Welcome to my Famous4 profile. Hope you like the tracks here! Make sure to check out my latest album Micinitus.
I just lit the mic on fire, so pull up a stump and lets melt some wax. Will being doing a show at the Rock Bottom pub in Wyoming. Be sure to check it out!
I know it's gonna be a rock'n party. Hope we don't burn the place down.</div>
</div>
</div>

<div class="modulewrapper" id="photoalbumwrapper">
<div id="photoalbumheaderwrapper"><span id="photoalbumheader">Albums</span></div>
<div><span class="moduleheader">Images</span></div>
<div id="photoalbumlist">
<div id="albumlistheader">
<div style="color:white; margin-left:18px; float:right;">Views</div>
<div style="color:white;">Name</div>
</div>
<div class="albumpost">
<div class="albumviewoutput">0</div>
<div class="albumnameoutput">album</div>
</div>
</div>
<div class="photoalbumimagecolum">
<div class="albumimage"><img src="jeremy.jpg" style="height:120px; width:80px;"/></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
</div>
<div class="photoalbumimagecolum" style="height:130px; margin-top:2px;">
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
<div class="albumimage"></div>
</div>
</div>

<div class="modulewrapper" id="tourdateswrapper">
<div><span id="tourdatesheader">Tour Dates</span></div>
<div><span class="moduleheader">Tour Info</span></div>
<div style="float:right;margin-right:20px;">
<div style="margin-left:12px; margin-top:12px;">Rock Bottom Pub, Whyoming, Canada: Dec 15, 20014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
<div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
</div>
<div style="background-color:aqua;height:120px; width:80px; margin-left:12px; margin-top:12px;">sad</div>
<div style="margin-left:12px; margin-top:12px;"><em id="tournameoutput">The Rock Solid Tour.</em></div>
<div style="margin-left:12px; margin-top:12px; width:340px;">Check out the rock solid tour with Flying J, and Aerobatic Kid.
These shows are live as hell! You don't wanna miss the kick ass opening by Tom Bomb, the rapper from Detroit. He's got mad
skills!</div>
</div>


</div>

<div id="feedwrapper">
<div>Feed</div>
</div>


<div id="adwrapper">
<div>Ad Space</div>
</div>


<div id="friendswrapper">
<div>Friends</div>
</div>



</div>
<div id="navigation">asdas</div>

</body>

</html>


CSS


#page{

height:1300px;
width:1332px;

}

.modulewrapper{

height:300px;
margin-top:20px;
background-color:white;
}


#searchbar{

height:40px;
background-color:#CCFFFF;

}

#searchfield{

padding:4px;
margin-top:8px;
margin-left:181px;

}

#searchbutton1{

height:40px;
width:40px;
background-color:red;
float:right;

}

#searchbutton2{

height:40px;
width:40px;
background-color:green;
float:right;
}

#searchbutton3{

height:40px;
width:40px;
background-color:blue;
float:right;

}


#profilewrapper{


height:1200px;
width:970px;
margin-top:12px;
margin-left:12px;
float:left;
}


#profilepic{

height:169px;
width:169px;
margin-top:12px;
background-color:fuchsia;
float:left;
}

#playerdeckimage{

margin-left:169px;height:150px;width:632px;

}

#playertracklist{


margin-left:169px; height:150px; width:632px; background-color:lime;

}

.basicinfolabel{

margin-top:8px;

}

#stagenameoutput{

font-weight: bold;

}

#genreoutput{

margin-left:4px;
}

#latestalbumoutput{

margin-left:4px;
}

#websiteoutput{

margin-left:4px;

}

#nextshowoutput{

margin-left:4px;

}

#biowrapper{

margin-top:8px;
}

#photoalbumwrapper{

height:300px;

}

#albumlistheader{

border-bottom: thin white dashed;

}

#photoalbumheaderwrapper{

float:right;

}

#photoalbumheader{

font-size:x-large;
margin-right:124px;

}

.moduleheader{

font-size:x-large;
margin:12px;"

}

#photoalbumlist{

background-color:black;
height:270px;
width:200px;
float:right;
overflow:scroll;

}

.albumimage{

background-color:lime;
height:120px;
width:80px;
margin-left:12px;
margin-top:12px;
float:left;

}

.albumpost{

color:white;

}

.albumviewoutput{

float:right;color:white; margin-right:12px;

}

.albumnameoutput{

color:white;

}

.photoalbumimagecolum{

height:130px;
margin-top:2px;

}

#tourdateswrapper{

height:300px;

}

#tourdatesheader{

float:right; font-size:x-large; margin-right:274px;

}

.tourdate{

margin-left:12px;
margin-top:4px;

}

#navigation{

height:169px;
width:169px;
margin-top:12px;
background-color:lime;
float:left;
}


#feedwrapper{

height:169px;
width:169px;
background-color:blue;
float:right;
margin-top:12px;

}

#adwrapper{

height:169px;
width:169px;
background-color:maroon;
float:right;
margin-top:12px;

}

#friendswrapper{

height:338px;
width:169px;
background-color:yellow;
float:right;
margin-top:12px;

}



Thank in advanced for any help. :)