http://ingramswaterandair.com/project-dev/

I'm horrible with trying to position CSS elements. I figured I would post the problem before I got too far into the project.

My problem is...

The navigation bar is inside a div called navigation. Inside the navigation div I have 2 divs called link1 and link2. The link1 div is being properly positioned.

I do not want to use absolute positioning to position link2, as problems arise with absolute positioning.

How do I get link2 to be positioned where I want it to?

I have tried

left:217px;
margin-left: 217px;
top:0px
margin-top:0px

and a lot of other combination's of these.

Can someone please tell me what I'm doing wrong and why it is pushing it further down?

EDIT: link2 is currently relatively positioned.
EDIT AGAIN: I put in a 3rd link and it pushes it even further down.

Well I solved the problem, I think, although I don't really know how I did it.

I set all 3 of the link divs as float left then changed the left property on them to put them in the correct position. I guess I will have to clear that float somehow.. although am not sure how.

I don't know if I did this correctly or not so I would like someone to explain how to put divs next to each other.

You shouldn't use floats AND relative/absolute positioning on the same element. You almost have it here though. Leave the "float:left" and take off the "position:relative" and the "left:XXpx" on the divs. Next, add some left padding to the divs to nudge them into the place you want them to be. You wont need any left padding on the first one, because it's already in the place that you want it to be in.

Try giving this a try.

.link1 {
	width:162px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
}

.link2 {
	width:162px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
        padding-left:50px;
}

.link3 {
	width:162px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
        padding-left:50px;
}

.link4 {
	width:162px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
        padding-left:50px;
}

.link5 {
	width:162px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
        padding-left:50px;
}