Why aren't my elements floating the right way?

IscTralf · Mar 26, 2013

Here is my website:http://violetoeuvre.com/I'm confused as to why my code isn't behaving the way I want it to. I'd like the side wrapper (side_nav_wrapper) to be on the left side of the page, with a left margin of about 200px. This works when I don't specify a float. (Shouldn't it work if I specify float:left;?)Then I'd like the photo box (home_photo) to float to the right of this. (Basically it would start where the C in Carmichael is). But, it keeps being pushed to the bottom. I've tried all kinds of float scenarios and can't figure it out. I'd like the text box (home_text) to go below the photo box and to the right of the side navigation. Why isn't this working!(top wrapper in black and white is working just fine)Thanks in advance. Here is my css:\[code\]/* Wrapper - Main *********/.top_wrapper{ display:block; background: rgba(0,0,0,1); width:100%; height: 200px; margin-top: 0px;}.top_emma { float:left; width:600px; height: 100px; padding-left: 100px; padding-top: 121px;}/* Top Navigation *********/.wrapper_nav_box { float: left; width:686px; height: 200px; background-color: rgba(255,255,255,0); margin-left: 10px;}.nav_box_l { display: block; float:left; width:247px; text-align: right; padding-top: 169px;}.nav_box_m { display: block; float:left; width:165px; text-align: center; padding-top: 169px;}.nav_box_r { display: block; float:left; width:219px; text-align: left; padding-right: 40px; padding-top: 169px;}/* Side Navigation ***********************/.side_nav_wrapper { display:block; background: rgba(255,255,0,.5); width:200px; height: 2000px; margin-left: 104px;}.side_nav_about { display:block; float:left; background: rgba(255,0,255,.5); width:200px; height: 100px;}.side_nav_writing { display:block; float:left; background: rgba(0,255,255,.5); width:200px; height: 200px;}.side_nav_contact { display:block; float:left; background: rgba(100,255,255,.5); width:200px; height: 200px;}/* Photo Box on Home Page ************************/.home_photo { display:block; float: right; width: 980px; height: 400px; background: rgba(0,0,255, .5); margin-left: 322px;}/* Text Box on Home Page */.home_text{ display:block; background: rgba(255,255,255,0); width:980px; height: 250px; margin-left: 322px;}\[/code\]and html:\[code\]<div class="top_wrapper"> <div id="emma_home" class="top_wrapper"> <div class="top_emma"> <a href="http://stackoverflow.com/questions/15640126/index.html">Emma Carmichael</a> </div>  <div class="wrapper_nav_box"> <div class="nav_box_l" id="nav_menu"> <a href="http://stackoverflow.com/questions/15640126/writing.html">WRITING |</a> </div> <div class="nav_box_m" id="nav_menu"> <a href="http://tumblr.com">BLOG |</a> </div> <div class="nav_box_r" id="nav_menu"> <a href="http://stackoverflow.com/questions/15640126/contact.html">CONTACT</a> </div> </div> </div> <div class="side_nav_wrapper"> <div class="side_nav_about">about</div> <div class="side_nav_writing">writing</div> <div class="side_nav_contact">contact</div> </div> <div class="home_photo"> </div> <div class="home_text"> <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; the theme of her thesis about contextualizing female rappers,

Why aren't my elements floating the right way?

IscTralf

New Member