Virtual Assistant Forums | Work from Home

dognose · #1 (**permalink**) 09-10-2011

I'm missing something simple about nested div tags. For some reason, I have occasional issues with content falling outside of the main div tag. I have to set a min-height in the main div to compensate for this.

Here's a screen shot. The red circled text should be in the white box.

HTML CODE:

HTML Code:

<div id="mainBox">
<div id="mainBoxImg"><img src="Images/img1.jpg" alt="joyfulGirl" width="214" height="237" border="0" />
</div>

<div id="centeredText2"><br /><h3><span style="font-size: 24px;">Imagine Waking up 3 Weeks from Today<br /> &amp; Instead of Feeling Drained . . . <br /><span class="blueTxt-bld"> Feel Rejuvenated!</span></span></h3><br /><br />
<h3>It <span style="font-style: italic;font-size: 18px;">is</span> possible.</h3>
<h3>You're not alone.</h3>
<h3>We will give you the <span style="font-style: italic;">right</span> information &amp; support.</h3>
</div>

<div id="myStory">
<img src="Images/img2.jpg" alt="nutrition" width="150" height="200" border="0" /><br /><p style="padding-top: 15px;"><a href="#Mystory">Click here to read Ann&quot;s story.</a><br /><p>
</div>
</div>	<!-- end mainBox div -->

CSS CODE:

Code:

/* ••••••••• start css for mainBox Div  •••••••••  */
.rejuv #mainBox {
	width: 970px;
	margin-left: auto;
	margin-right: auto;	
	background-color: #FFFFFF;
	border: 2px solid black;
	min-height: 300px;
}

.rejuv #mainBoxImg {
	width: 230px;
	float: left;
}

.rejuv #mainBoxImg img {
	padding-top: 20px;	
	padding-left: 15px;
}

.rejuv #centertedText {
	width: 490px;
	float: left;
	padding-top: 20px;
}

.rejuv #centertedText h3 {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #2f4f4f;
}

.rejuv #myStory {
	width: 250px;
	float: right;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
}

.rejuv #myStory a {
	color: #2f4f4f;
}

Thanks for any help.

Codehead · #2 (**permalink**) 09-10-2011

When you use float on an element like a DIV, the browser doesn't consider it's height when calculating the parent elements height. The solution is to add this right after the floated element and before the parent's closing tag:

Code: