如何防止div标签彼此移动？

Question

I took time to format a div tag for my main content and then I put that div inside a wrapper div. Well, when I went to add my logo to the site, everything shifted. The div that the logo was in seemed to have pushed the wrapper tag down. Being new to code, I'm trying to keep my design as clean as possible but it is falling apart. Any suggestions? Any help? In the fiddle, I started the HTML code where the img source, this was the image that -when added- pushed my content down.

Here is the fiddle http://jsfiddle.net/569Gm/

<div id="logo">
   <img src="images/logo/logo-vector.png" />
</div>

<div id="wrapper">

   <div id="aboutus">   
       <p>We are a Hagerstown-based junk removal and moving service. Able to accomplish jobs both big and small, we accept residential, commerical, and industrial jobs. </p>
       <p>&nbsp;</p>
       <p>Active since 2014, we are a relatively new service looking to help as many people as possible. Visit our Facebook Page to stay posted on our recent works, job openings,        special offers and more. </p>
   </div>

   <div id="scheduling">
     <p>To schedule for a service, please provide the information listed
     below and we will respond promptly.</p>
   </div>

   <div id="contactus">
   <p>If you have any questions, comments, or concerns, our contact information is listed below.</p>
   <p>&nbsp;</p>
   <p>Phone: (443) 690 6421</p>
   <p>Email: service@hagdustboy.com</p>
   </div>   
</div>

</body>
</html>






</div>

This is what my website looks like now that I added the logo. http://www.pixentral.com/show.php?picture=1PYUTuzOhcbLcaoadEpTNk2qnm

Answer 1

Add float:left; to your #logo , and use clear:left; instead of clear:both; .
By adding float:left; & clear:left; the #wrapper will come inline with your logo.
See the Demo

Answer 2

Float your logo left "float: left;". Clear your logo left as well "clear: left;". As a general rule of thumb, anything in the flow of the page /not "absolutely" positioned will need to be floated in some form way or shape unless the "div" containing it is floated. A good way of remembering this is, anything composition related most likely needs to be floated. Float left, assuming your margins and paddings are "margin: 0" "padding:0" will snap your div to as far right or left as the width parameters allow. Floating is really how you build the flow of the page.