Aligning DIVS next to each other

HTML & CSS
1

Hi there. I’m looking to align two boxes in the content area.

‘content_left’ with ‘content_right’ (purple box)

I think I have too many DIVs at this point. I’m having a hard time figuring out how to get these two boxes aligned next to each other. I’d like the purple box to also have some space on the right just like the left area has.

I’d greatly appreciate any help. Thank you in advance

http://pmsidirect.com/website_2010/index.html

@charset "UTF-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif ;
	font-size: 12px ;
	text-align: center;
	height: 100%;
	background-image:url(bg.jpg);
	background-repeat: repeat-x;
	background-color: #749381;
}

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 17px;
    width: 1000px;
	
}


#header {
	background-image:url(test.png);
	background-position: center;
	background-repeat: repeat-x;
	height: 95px;
	width: 100%;
}

#nav {
	width: 100%;
	height: 150px;
	
}

#content {
	height: 500px;
	width: 1000px;
	background-image:url(content.png);
	background-position: center;
	background-repeat:repeat-x;

}

.container_content {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 17px;
    width: 1000px;
	clear: both;
	
}

	
#content_left {
	height: 450px;
	width: 740px;
	float: left;
	clear: both;
	padding: 5px;
	

}

#content_right {
	height: 450px;
	width: 220px;
	clear: both;
	float: right;
	padding: 5px;
	background-color: #90C;


}

#footer {
	height: 75px;
	width: 100%;
	clear: both;
	font-family: Georgia, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 18px;
	background-image:url(footer.png);
	background-repeat:repeat-x;
  
}
#footer a {
	color: #000000;
	text-decoration: none;
}
	#footer a:hover {
	color: #ffffff;
}
	#footer #altnav {
	clear: both;
	width: 400px;
	float: left;
	text-align: left;
	padding-top: 12px;
	line-height: 14px;
	
}
#footer #altnav2 {
	font-size: 10px;
	clear: both;
	width: 400px;
	float: left;
	text-align: left;
	padding-top: 11px;
	line-height: 12px;
	color: #6f6f6f;
	
}
	#footer #copyright {
	padding-top: 12px;
	text-align: right;
}
2

nope content_right, but why have it even there? do you know how to and when to use clear?

3

You also seem to be adding “clear: both;” to everyone. I think it’s hitting you where you have it on your second float. It will try to appear under the first float due to the clearing (what clearing does), even after fixing the width issue that Bill pointed out (which will indeed cause float drop).

4

Thank you very much. That definitely helps!

5

Your width is set at 1000, and you have stuffed 1024 inside that. That forces the right content down below the left content, Try removing container_content and see what that does for you. It should remove 34px of what is stuffed in the middle and the remaining 10px should show up between the left and right content.

6

A lot depends on how you use the CSS with your HTML. If you are doing something simple like <div id="content_left> something here </div> <div id="content_right> second column </div>

Try adding margin-left: 10px; to #content_left and add margin-right: 10px; to #content_right. That should show you something that you can adjust to get things like you want them.

Seeing the HTML would also be a help, and/or posting a link to the page.

I generally don’t use the float: right; and just use float left and adjust the widths to get the look I want.

7

There may be reasons to have a div inside a div, but if your code always has <div><div> content </div></div>, you can combine the CSS for the two div tags and reduce some of the code you are using.

8

Stomme poes, Thanks for seeing that. I totally missed it.

aestheticblur, Yes, remove the clear:both; from both left and right. The clear:both; is to clear floats. Without floats, your content will stack with the right content below the left. Then the float right will push the right content to the right, but still below the left.

9

I didn’t look at the HTML but assuming the CSS is written in order of source, I don’t see what clear is doing on many of the other boxes either.

Clear is something you put on a box who is coming AFTER a float who you don’t want riding up alongside or behind that float, but instead definitely want to start underneath that float… on a newline.

10

OK, so in other words, I should take out the “clear:both;” out of my content_left DIV?

11

OK, makes sense now. Thank you very much. Sorry for the confusion!

12

Thank you. Yes, the link is here:

http://pmsidirect.com/website_2010/index.html