title: What kind of CSS positioning can I use that isn't going to have (many) side effects?
body: <p>I'm currently building a website and and I can't find a CSS positioning method that works, meaning any CSS positioning element that doesn't make other HTML elements behave weirdly.  Is there any CSS positioning methods that would position an HTML element precisely, accurately and not cause (many) issues with other elements?  So far <code>float</code> and <code>position: absolute;</code> don't work well. Thanks!</p>
  
  <p>Since apparently what I'm asking is unclear, I'm asking "What kind of positioning can I use that doesn't have any (or few) side effects?"</p>
  
  <hr>
  
  <p>Here's the Code I'm working on:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
   display: inline-block;
  }
  
  ul {
   display: inline-block;
   margin: 0px;
   padding: 0px;
  }
  
  #main_nav, logo {
   display: inline-block;
   padding: 0px;
   margin: 0px;
  }
  
  nav li a:link {
   font-weight: bold;
   display: inline-block;
   text-decoration: none;
   font-family: times;
   font-size: 24px;
   list-style: none;
   padding: 5px;
   border: 2px solid black;
   border-radius: 5px;
   color: black;
  }
  
  nav li a:visited {
   color: rgba(0,0,0,0.7);
  }
  
  nav li a:hover {
   background-color: rgba(0,0,0,0.6);
   color: white;
  }
  
  nav li a:active {
   color: black;
   border-color: black;
  }
  
  nav {
   width: 1000px;
   height: 130px;
   background-color: rgba(255,255,255,0.7);
   padding: 10px;
   margin: 0px auto;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
  }
  
  input[type=search] {
   font-size: 16px;
  }
  
  #searchbox {
   position: absolute;
   right: 0px;
   top: 0px;
  }
  
  #searchbox_div {
   position: relative;
   display: inline-block;
   padding: 0;
   width: 100%;
  }
  
  #logo {
   display: inline-block;
   width: 200px;
   font-family: arial;
   margin: 0px;
   padding: 0px;
   font-size: 26px;
  }
  
  #logo_jeff, #logo_arries, #logo_website {
   margin: 0px;
  }
  
  #logo_jeff {
   letter-spacing: 35.5px;
  }
  
  #logo_arries {
   letter-spacing: 11px;
  }
  
  #logo_website {
   letter-spacing: 4px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  body {
      background-image: url("../pictures/jeff_skiing.jpg");
      background-color: red;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 500px;
   margin: 0px;
   padding: 0px;
  }
  
  aside {
   position: absolute;
   right: 0px;
   background-color: rgba(255,255,255,0.9);
   width: 170px;
   height: 600px;
   margin: 0;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   padding: 10px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  #main_content {
   width: 1000px;
   min-height: 600px;
   display: block;
   background-color: rgba(255,255,255,0.7);
   margin: 0 auto;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   position: relative; top: 0px;
   padding: 10px;
  }
  
  #here_you_can_learn {
   font-size: 47px;
   color: gray;
   margin: 0 auto;
   margin-bottom: 10px;
   text-align: center;
  }
  
  
  #welcome {
   text-align: center;
   color: rgb(0, 0, 110);
   font-size: 100px;
   margin: 0;
  padding: 10px 10px 20px 10px;
  }
  
  #down_arrow {
   height: 50px;
   margin: auto;
   display: block;
   padding: 10px;
  }
  
  #most_frequent {
   width: 600px;
   vertical-align: top;
   display: inline-block;
   background-color: rgba(0,0,0,0.1);
   border-radius: 3px;
  }
  
  #m_f_heading {
   font-size: 30px;
   margin: 10px;
   padding: 5px;
   text-align: center;
   background-color: rgba(0,0,0,0.2);
   border-radius: 5px;
  }
  
  
  
  #m_f_show_more {
   font-size: 20px;
   margin: 10px;
   padding: 5px;
   text-align: center;
   background-color: rgba(0,0,0,0.2);
   border-radius: 5px;
  }
  
  
  #recent_activity {
   width: 375px;
   display: inline-block;
   background-color: rgba(0,0,0,0.1);
   border-radius: 3px;
  }
  
  #r_a_heading {
   font-size: 30px;
   margin: 10px;
   padding: 5px;
   text-align: center;
   background-color: rgba(0,0,0,0.2);
   border-radius: 5px;
  }
  
  #r_a_body {
   font-size: 15px;
   margin: 10px;
   padding: 5px;
   text-align: center;
   background-color: rgba(0,0,0,0.2);
   border-radius: 5px;
  }
  
  #r_a_show_more {
   font-size: 20px;
   margin: 10px;
   padding: 5px;
   text-align: center;
   background-color: rgba(0,0,0,0.2);
   border-radius: 5px;
  }
  
  #r_a_show_more_link:visited {
   color: black;
  }
  
  #r_a_show_more_link:hover {
    color: gray;
    background-color: rgba(0,0,0,0.9);
  }
  
  #r_a_show_more_link:active {
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Home | Jeff's Website&lt;/title&gt;
  
  &lt;link href="styles/main_navigation.css" type="text/css" rel="stylesheet" /&gt;
  &lt;link href="styles/body.css" type="text/css" rel="stylesheet" /&gt;
  &lt;link href="styles/main_content.css" type="text/css" rel="stylesheet" /&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;!--Main Nav--&gt;
  &lt;header&gt;
   &lt;nav&gt;
    &lt;div id="searchbox_div"&gt;
     &lt;form action="" id="searchbox"&gt;
      &lt;input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!"&gt;
      &lt;input type="submit" value="Search!"&gt;
     &lt;/form&gt;
    &lt;/div&gt;
    
    &lt;div id="logo"&gt;
     &lt;h1 id="logo_jeff"&gt;JEFF&lt;/h1&gt;
     &lt;h1 id="logo_arries"&gt;ARRIES&lt;/h1&gt;
     &lt;h1 id="logo_website"&gt;WEBSITE&lt;/h1&gt;
    &lt;/div&gt;
    
    &lt;div id="main_nav"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Trips&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Politics&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Pictures&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Videos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Computer&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Misc&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/nav&gt;
  &lt;/header&gt;
  
  
  &lt;!--Welcome to jeff's website--&gt;
  
  &lt;div&gt;
   &lt;h2 id="welcome"&gt;Welcome to my Website!&lt;/h1&gt;
   
   &lt;a href="#here_you_can_learn"&gt;
   &lt;img src="pictures/down_arrow.png" id="down_arrow"/&gt;
   &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!--right side nav--&gt;
  
  &lt;aside&gt;
   &lt;p&gt;this is aside&lt;/p&gt;
  
  &lt;/aside&gt;
  
  
  &lt;!--Main Content--&gt;
  
  &lt;div id="main_content"&gt;
   &lt;h2 id="here_you_can_learn"&gt;Here you can learn about me and my adventures!&lt;/h2&gt;
  
  &lt;!--Most Frequently visited pages: on left side of page--&gt;
   &lt;div id="most_frequent"&gt;
    &lt;p id="m_f_heading"&gt;Most frequently visted pages!&lt;/p&gt;
    
    
    
    &lt;a href=""&gt;&lt;p id="m_f_show_more"&gt;Show More&lt;/p&gt;&lt;/a&gt;
   
   &lt;/div&gt;
   
  &lt;!--Recent Activity: on the right side of page--&gt;
   &lt;div id="recent_activity"&gt;
    &lt;p id="r_a_heading"&gt;Recent Activity&lt;/p&gt;
    
    
    &lt;p id="r_a_body"&gt;test&lt;/p&gt;
    
    
    &lt;a href="" id="r_a_show_more_link"&gt;&lt;p id="r_a_show_more"&gt;Show More&lt;/p&gt;&lt;/a&gt;
   &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>