Float gone Wrong!

HTML & CSS
1

I want the sideNav to sit close to the content but how? T_T

heres the code for html and css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
	@import url(style.css);
</style>
<title>Mouse Case Study</title>
</head>

<body>

<div id="container">

    <div id="header"> 
    
    <h1>Wheel<span>Over</span></h1>

	<ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    </ul>
    
    </div> <!-- header -->
    
    <div id="content">
    	<h2>Computer Typing</h2>
        <p>Keyboarding is the penmanship of the computer age, as essential as closing the o's and dotting the i's. Just as skill with a pen fosters the ability to communicate in writing, keyboarding extends that ability into the realm of word processing, electronic communication, and desktop publishing.

"Hunt and peck" keyboarding, results from little or no keyboarding, dampens student enthusiasm and restricts the flow of ideas in the classroom. Additionally, keyboarding requires practice and repetition, two activities little favored by most students. What is needed is a keyboarding program that interests students and requires few resources as it teaches typing.
</p>

		<h3>Getting Started</h3>
        <p>There are several basics to successful keyboarding. These basics include learning how to:</p>
        <ol>
	<li>Sit with the proper posture;</li>
	<li>Hold the wrists properly</li>
	<li>Strike the keys correctly;</li>
	<li>Return their fingers to the Home Row keys.</li>
        </ol>
        <h3>Tips</h3>
        <ul>
        <li>Keep practice times short; avoid extended sessions that raise anxiety.</li> 
		<li>Keep practice times fast-paced and as pleasurable as possible (e.g. play music ).</li>
		<li>Dictate to entire group the letters to be struck. Keep group together.</li>
        </ul>
    
  </div> <!-- content -->
    
    <div id="sideNav">
    
    	<h3>Resources</h3>
        <li><a href="#">Cursor Speed</a></li>
        <li><a href="#">Speed Type</a></li>
        <li><a href="#">Ground Type</a></li>
        <li><a href="#">PC Typing</a></li>
        <li><a href="#">Speed Job</a></li>
        <li><a href="#">Increase Type</a></li>
    
    </div> <!-- sideNav -->  
  
</div> <!-- container -->
    
</body>
</html>


/* 
Name: Mouse Case Study
Date Started: October 30, 2010
Date Finished: */

/* Default Styles */

* { padding: 0 ; margin: 0; }
body, html { height: 101%; }
a { text-decoration: none;}
ul { list-style: none;}
body { background: #eee url(images/bg.gif) top left no-repeat;color: #999; font-family: Georgia ; font-size: 62.5%;}
#container { width: 760px; margin: 20px auto; }

/* Header */

#header { background-color: #FFF; height: 70px; border: 2px solid #CCC;}
#header h1 { float: left; display: block; line-height: 80px; font-size: 3.6em; text-indent: 20px; font-family:Tahoma, Geneva, sans-serif}
#header h1 span { color: #FF9900; text-transform: uppercase; font-size: 0.8em;}
#header li { float: right; display: block; padding: 10px; text-transform: uppercase; font-size: 1.2em; letter-spacing: -1px;}
#header a { line-height: 60px; color: #FF9900; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif}
#header a:hover { border-top: 1px solid #FFCC99; color: #FFCC99; }

/* Content */

#content { clear: left; width: 550px; border: 2px solid #CCC; background-color: #FFF; overflow: hidden; padding: 15px;}
#content h2 { color: #FF9900; padding-bottom: 5px; font-size: 1.8em; letter-spacing: -1px;}
#content h3 { color: #FF9900; padding-bottom: 5px; font-size: 1.4em; letter-spacing: -1px; padding-top: 5px;}
p { line-height: 1.5em; font-size: 1.2em; padding-top: 5px;}
ol  { line-height: 2em; font-size: 1.2em; padding-left: 20px; padding-top: 5px}

ul { line-height: 2em; font-size: 1.2em; padding-top: 5px; }
#content ul li { background: url(images/arw.gif ) no-repeat 2px; padding-left: 10px;}



/* sideNav */

#sideNav { float: right; width: 150px; background-color: #FFF; border: 2px solid #CCC; overflow: hidden; }
#sideNav li { line-height: 1.5em; font-size: 1.2em; list-style:none; text-indent: 20px;}
#sideNav a { color:#FF9900; display: block;}
#sideNav a:hover { background-color: #FF9900; color:#FFF;}
#sideNav h3 { text-align: center; border-bottom: 2px solid #CCC; padding: 2px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1.5em; background-color: #eee;}

I hope you could help me

2

Hi butterbescotch, welcome to SitePoint! :slight_smile:

You have a couple of options. Easiest is to add this to your Content styles:

#content {
    float: left;
}

That’s the best and simplest way. The way to do it without changing your CSS is to reverse the order of content and sidebar in the html, but that’s not as good a solution.

3

Thanks Ralph for the quick reply I really need that.