Hey, first post on these forums so be kind

I have two poblems, first off I have a couple of images that I have positioned using a float. However I think because they are declared as float containers they're not expanding thier parent container. Have a look:

img.imageRight {
	float: right;
	width: 200px;
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
This is my home server so it may not be up all the time. How would I set these containers to take up a set amount of space so that the parent container see's them and expands?

Also, you can see my links at the top are squashed and going onto two lines, now I want them to wrap within thier containers so I can put some styling on them. How would I go about this?

<div id="links">
<div id='navLink'><a href='index.php?page=4'>Home</a></div> 
<div id='navLink'><a href='index.php?page=5'>Wholefoods & Health </a></div> 
<div id='navLink'><a href='index.php?page=6'>Food Supplements & R</a></div> 
<div id='navLink'><a href='index.php?page=7'>Sports Nutrition</a></div> 
<div id='navLink'><a href='index.php?page=8'>Organic Produce</a></div> 
<div id='navLink'><a href='index.php?page=9'>Organic Vegebag Sche</a></div> 
<div id='navLink'><a href='index.php?page=10'>Special Offers</a></div> 
<div id='navLink'><a href='index.php?page=11'>Bodycare</a></div> 
<div id='navLink'><a href='index.php?page=12'>Latest News</a></div> 
CSS for the links:

#links {
	padding: 10px 0 0 0px;
	width: 930px;
	margin: 0 0 0 0px;
	border-bottom: 4px solid green;

#navLink {
	text-align: center;
	display: inline;
	border-bottom: 4px solid green;

#navLink a {
	color: black;
	font-size: small;

#navLink a:visited {
	font-size: small;
	text-decoration: none;

#navLink a:hover {
	font-size: small;
	border-bottom: 4px solid gold;

#navLink a:active {
	font-size: small;
You can see that i've tried to set a max width that it shouldn't exceed, but I don't understand why the text isn't going onto the next line when it reaches the end of the container.

Thanks in advance!!!