Nested div pushes past parent

Hi all.

I’m doing an assignment atm and I have a kind of faux column creating a border between the main content and sidebar. The idea is that it goes on the parent of the two inner divs and the parent wraps around so that it goes all the way down. Unfortunately, I have given it a min height of 310px and that’s as far down as it goes, even though the main content div inside it extends further than that.

I would love to be able let you take a look at the site, but it is unfortunately done in ASP.NET and I don’t have anywhere to host it as yet (later this week maybe). I am able to post the “offending” css though:

#contentWrapper {
	position: relative;
	width: 100%;
	min-height: 310px;
	padding-top: 5px;
	margin-top: 30px;
	background-color: #FFFFFF;
	/*The following creates a "faux column" which I have used to place a border between the 2 content divs.	The article showing how to do this can be found at*/
	background-image: url(images/content-inner-border.png);
	background-repeat: repeat-y;
	background-position: 70% 0;
	clear: both;
#mainContent {
	position: relative;
	width: 67%;
	float: left;
	padding: 10px 5px 10px 20px;
	min-height: 300px;
	background: url(images/left-border.png) 0 30px no-repeat;
	margin-top: -20px;
#secondaryContent {
	position: relative;
	width: 27%;
	float: right;
	padding: 10px 15px 10px 5px;
	min-height: 300px;
	background: url(images/right-border.png) 100% 30px no-repeat;
	margin-top: -20px;

I thought originally that is might be because I didn’t have the #contentWrapper set to position: relative; but fixing that did nothing.

I just need to know why the #contentWrapper div isn’t actually wrapping the #mainContent and #secondaryContent divs. If anyone has any ideas I would love to hear them.

Thanks in advance.


Wrappers by default don’t wrap around floated content. The easy solution is to apply overflow: hidden to the wrapper. See if that achieves what you want.

Thanks Ralph, I’ll give that a go now.

You’re a genius Ralph. Thank you so much.

I wouldn’t have lost marks for it, but it was bothering me a lot.