Trouble getting wrapper div to "grow" as inner div expands

mpsn · March 5, 2012

Hi, I thought the point of having a div within another div (or p for that matter) was to ensure that if the content inside the inner div gets too long, that the outer or wrapper div will "grow" as long it has padding bottom set to maintain that and no height set, so I don't get why my mainContentItem div which is inside my mainContent div are fine, but mainContent div relative to the wrapper contentBox causes mainContent div to go out of the contentBox div, when I assumed that since my mainContent div is embedded inside my contentBox div that the contentBox div would grow by 900px as mainContent div gets longer.

My CSS:

.container /*ONLY MAIN BOX that holds contentBox(that holds content, sidebar) and needs margin-left and margin-right set to auto in order to be positioned in center of page*/
{
width:1180px;
margin-left:auto;
margin-right:auto;
margin-top:10px;/*CSS Reminder:the main div 'container' is inside body so it will move 
10px from the top of whatever box precedes it (here it's header div)*/
padding:10px 10px 900px 10px;
background-color:#FFF;
}

/*================================CONTENT================================*/
.contentBox/*hold the main content box*/
{
float:left;
width:880px;
padding:5px 15px 100px 15px;
background-color:white;
border:1px solid black;
}

.mainContentItem/*holds main content box itms*/
{
padding:2px 20px 2px 20px;
background-color:yellow;
}
/*inherited class selectors that are children of mainContentItem wrapper so
they will be insde mainContentItem box*/
.mainContentItem h1/*text style for headings*/
{
font:bold 25px Verdana, Arial, sans-serif;
text-align:center;
color:#FFF;
background-color:black;
}

.mainContentItem h2/*text style for sub-headings*/
{
font:italic 20px Verdana, Geneva, sans-serif;
text-align:center;
}

.mainContentItem h3/*text style for paragraphs*/
{
font:bold 14px "Trebuchet MS", Helvetica, sans-serif;
background-color:	#EEE8AA;
}

HTML:

<html>
<head></head>
<body>
<div class="container"><!-- this holds the mainContent and sidebar divs(which in turn holds sidebarItem)-->
<div class="contentBox">
  <div class="mainContentItem">
      <h1>Heading</h1>
      <h2>Subheading</h2>
      <h3>This is a sentence, a sentence...etc etc etc</h3>
   </div>
</div>
</div>
</body>
</html>

AyKay47 · March 5, 2012

Looks okay to me, unless I am missing something?

http://jsfiddle.net/aBqfu/

mpsn · March 6, 2012

Here, please try out the following, this one you'll see the yellow div (mainContentItem) doesn't stay within its wrapper: container.

My CSS:

=====

.container /*ONLY MAIN BOX that holds contentBox(that holds content, sidebar) and needs margin-left and margin-right set to auto in order to be positioned in center of page*/
{
width:1180px;/*1180px;*/
margin-left:auto;
margin-right:auto;
margin-top:10px;/*CSS Reminder:the main div 'container' is inside body so it will move 
10px from the top of whatever box precedes it (here it's header div)*/
padding:10px 10px 900px 10px;
background-color:grey;
}

/*================================CONTENT================================*/
.mainContentItem/*holds main content box itms*/
{
float:left;
width:870px;
padding:2px 20px 2px 20px;
word-wrap:break-word;/*CSS3*/
background-color:yellow;
}
/*inherited class selectors that are children of mainContentItem wrapper so
they will be insde mainContentItem box*/
.mainContentItem h1/*text style for headings*/
{
font:bold 25px Verdana, Arial, sans-serif;
text-align:center;
color:#FFF;
background-color:black;
}

.mainContentItem h2/*text style for sub-headings*/
{
font:italic 20px Verdana, Geneva, sans-serif;
text-align:center;
}

.mainContentItem h3/*text style for paragraphs*/
{
font:bold 14px "Trebuchet MS", Helvetica, sans-serif;
background-color:	#EEE8AA;
}

/*=============================SIDEBAR==============================*/
.sidebar/*WRAPPER that holds the indiv sidebar div itms*/
{
/* float:right;
width:240px;
padding:10px 5px 400px 5px;
background-color:#90EE90;
border:1px solid black; */
}

.sidebarItem/*holds itms inside the sidebar box: e.g. ticker, visual funds tracker*/
{
float:right;
width:240px;
background-color:green;
padding:5px;
word-wrap:break-word;/*CSS3*/
border:1px solid black;
}

.sidebarItem h1/*text style for headings*/
{
font:bold 25px Verdana, Arial, sans-serif;
text-align:center;
color:#FFF;
background-color:black;
}

.sidebarItem h2/*text style for sub-headings*/
{
font:italic 20px Verdana, Geneva, sans-serif;
text-align:center;
}

.sidebarItem h3/*text style for paragraphs*/
{
font:bold 14px "Trebuchet MS", Helvetica, sans-serif;
background-color:	#EEE8AA;
}

.clear/*to prevent any elems that come after sidebar box to float to right*/
{
clear:both;
}

/*==============================FOOTER==========================*/
.footer
{
color:#000;
width:1200px;
margin-left:auto;
margin-right:auto;	
margin-top:20px;
padding:2px;
text-align:center;
border:1px solid black;
background-color:#90EE90;/*#228B22;*/
}

My HTML:

========

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Yo</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="header">
ds
</div><!-- END header-->

<div class="container"><!--wrapper for contentBox which holds mainContent(holds mainContentItem boxes) and sidebar(holds sidebarItem boxes)-->
	<div class="mainContentItem">
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdf
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDdddddddddddddddddddddddddddddddddddddddddffffffffffffffffffffffffffffffffffffffffffHelloHelow
			dsfdsfdsfsdfdsfsdfDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdfDDDDDDDDDDDDDD
			sdfDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdfDDDDDDDDDDDDDDDDD
			sdfDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdDDDDDDDDDDDDDDDDf
			sdfdsfdsfdsfdsDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdf
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDDDDDDDDDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdf
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDDDDDDDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdf
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDDDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDDDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdf
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdf
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdfDDDDDDDD
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsdDDDDDDDDDDDDDDDDDDDD
			sdfdsfdsfdsfsdfsdfDDDDDDDDDDD
			sdf</h3>
		<h1>sdf</h1>
		<h2>sdfdsfds</h2>
		<h3>sdfdsfdsfsdf
			sdfDDDDDDDDDDDDDDDDDDDDDDDDDDDD
			dsfdsfdsfsdfdsfsdfDDDDDDDDDDDDDDD
			sdfdsfdsfdsfdsDDDDDDDDDDDDD
			sdfdsfsdfdsdsfsd
			sdfdsfdsfdsfsdfsdf
			sdf</h3>
	  </div><!-- END mainContentItem-->

</div><!--END container div-->
<div class="clear"></div>
<div class="footer">
<h6>Site<em>powered by WordPress</em></H6>
</div>

</body>

</html>

Appreciate it.

mpsn · March 7, 2012

To be clear, the mainContent and sidebar divs go past the wrapper they are in:container, I do have padding for bottom of 900px, so why doesn't my container wrapper (that holds mainContent and sidebar div) "grow" appropriately as mainContent and sidebar get taller (more content added I mean).

From my CSS and my HTML, it looks fine, I hope someone can help out.

mpsn · March 7, 2012

Ok, I figured out my problem, it's because I float:left for my mainContent div, so I removed this and voila, the container that holds mainContent div "grows", but if I don't keep left float my mainContent and right float my sidebar, it means I have to hardcode with setting margin-left to get the two to divs (mainContent and sidebar) to be beside each other, but not touching...

Unless there's another way...

AyKay47 · March 7, 2012

using the code from reply #2 that you posted, I have adding overflow: hidden to .container so it will encase floating items (bit of a hack). This is similar to using clear: both but I prefer this method.

So you will have:

.container /*ONLY MAIN BOX that holds contentBox(that holds content, sidebar) and needs margin-left and margin-right set to auto in order to be positioned in center of page*/
{
width:1180px;/*1180px;*/
margin-left:auto;
margin-right:auto;
margin-top:10px;/*CSS Reminder:the main div 'container' is inside body so it will move 
10px from the top of whatever box precedes it (here it's header div)*/
padding:10px 10px 900px 10px;
background-color:grey;
        overflow: hidden;
}

Keep in mind that this will only work if you have specified a width for the div, and overflow can be set to either auto or hidden.

Sign In

Trouble getting wrapper div to "grow" as inner div expands

Recommended Posts

mpsn

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

mpsn

Link to comment

Share on other sites

mpsn

Link to comment

Share on other sites

mpsn

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information