Image Positioning and Inline Elements

[jack.mitchell]

Hey all,

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:

http://86.17.194.115/halfmoon_oop/index.php?page=7

img.imageRight {
	float: right;
	width: 200px;
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	display:block;
}

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> 
</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!!!
Jack.

 

[jack.mitchell]

Ok, I've changed it to a class instead of an ID. I've also managed to get the image positioning sorted out by adding clear:both to the footer container. Here is the full CSS if it would be of any help.

/* CSS Document */

body {
	margin: 20px;
	font-family: sans-serif;
}

#mainContainer {
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	width: 950px;
}

#title {
	padding: 40px 0px 0px 0px;
	line-height: 30px;
	background:url('../images/halfmoon-logo.jpg') no-repeat 0 0;
	height: 110px;
	width:950px;
	text-align: right;
	color: grey;
	overflow: hidden;
}

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

.navLink {
	min-width: 100px;
	margin: 2px;
	text-align: center;
	display: inline;
	border-bottom: 4px solid green;
}

.navLinkCurrent {
	margin: 2px;
	text-align: center;
	display: inline;
	border-bottom: 4px solid gold;
}

.navLinkCurrent a {
	text-decoration: none;
	font-weight: bold;
	color: black;
	font-size: small;
}

.navLink:hover {
	font-size: small;
	border-bottom: 4px solid gold;
}

.navLink a {
	text-decoration: none;
	font-weight: bold;
	color: black;
	font-size: small;
}

.navLink a:visited {
	font-size: small;
}

.navLink a:active {
	font-size: small;
}

#body {
	color: #212121;
	width: 100%;
	margin: 0 0 0 0px;
	text-align: justify;
	clear: both;
	line-height:140%;
}

#footer {
	border-top: 4px solid green;
	line-height: 30px;
	height: 20px;
	width: 914px;
	padding: 0 18px 0 18px;
	color: black;
	font-size: x-small;
	font-weight: bold;
	text-align: right;
	clear: both;
}

#mainShopInfo {
	float: right;
	width: 620px;
	height: 200px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid grey;
	text-align: center;
}

hr.mainShopInfo {
	width: 80%;
}

p.mainShopInfoTop {
	margin: 4px;
	color: #787777;
	line-height: 150%;
}

p.mainShopInfoBottom {
	margin: 10px;
	color: #575555;
	font-weight: bold;
}

img {
	border: 1px solid black;
}

img.mainShopImage {
	float: left;
	height: 220px;
	margin-top: 20px;
	border: 1px solid black;
}

img.imageLeft {
	float: left;
	width: 200px;
	margin-right: 20px;
	margin-bottom: 5px;
	display:block;
}

img.imageRight {
	float: right;
	width: 200px;
	margin-left: 20px;
	margin-bottom: 5px;
	display:block;
}

img.imageCentre {
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	display:block;
}

Thanks for the tip.

Jack.