Why is my CSS not cooperating? - html

Question

Ok, so maybe I'm slightly losing my mind but I'm trying to recreate a homepage that incorporates 2 background images into my CSS. I'm attempting to use one as a top image and one as a bottom image, and in the middle is a table that has links and images. However, for some reason, I'm having difficulty with pulling it all together to make it look like one smooth image.
For example, my container class (as shown below) only puts a border around the topBox class and not the entire container div. I want all 3 divs to have one border around it (coming from the container class) so that it looks as if its one image. Here is my HTML and CSS.
What am I doing wrong? Thanks in advance for any assistance!
#Container {
float:left;
width: inherit;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border:0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
<div id="Container">
<div class="boxTop"></div>
<div class="box"><table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" /></td>
<td valign="top">
<h3>Become a Member</h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" /></td>
<td valign="top">
<h3>Classes & Support</h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" /></td>
<td valign="top">
<h3>Watch the TV Segment</h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top"><img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" /></td>
<td valign="top">
<h3>Read the Magazine</h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></div>
<div class="boxBtm"></div>
</div>

Answer 1

Very simple answer, just remove the hight of the id #Container and it'll work. I hope this is what you where looking for ;)

Answer 2

You have set a specific height on your container, so your border is only going to be that height. If you set the height to 750 pixels, it is going to work.
#Container {
float: left;
width: inherit;
height: 750px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
background-repeat: no-repeat;
/*place background image css code here and remove line above*/
background-position: left 0px top 0px;
background-size: 300px;
}
.box {
position: relative;
left: 100;
top: 100;
width: 350px;
height: 550px;
border: 0px solid #000000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: inherit;
height: 95px;
background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
/*place background image css code here and remove line above*/
background-repeat: no-repeat;
background-position: left 0px bottom 0px;
background-size: 300px;
}
<div id="Container">
<div class="boxTop"></div>
<div class="box">
<table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top">
<a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" />
</a>
</td>
<td valign="top">
<h3>Become a Member</h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/wrapper/?Itemid=203">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" />
</a>
</td>
<td valign="top">
<h3>Classes & Support</h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/component/hwdvideoshare/?task=viewcategory&Itemid=166&cat_id=5">
<img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" />
</a>
</td>
<td valign="top">
<h3>Watch the TV Segment</h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top">
<a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">
<img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" />
</a>
</td>
<td valign="top">
<h3>Read the Magazine</h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="boxBtm"></div>
</div>

Answer 3

This can be a lot simpler - you only need one wrapper div, not three. (You also shouldn't be using a table for layout purposes, but that's a whole other subject. For now, this'll work if you drop your table in where the content p tags are.)
Here's how to get roughly the visuals you want with a lot less code:
.box {
width: 300px;
border: 1px solid;
border-radius: 0 0 9px 9px;
/* You can specify multiple background images like this: */
background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
/* first position goes with the first image url and vice versa */
background-position: top, bottom;
/* 130px padding on top to create room for the "lifestyles" logo
20px on the sides for breathing room
50px at the bottom to create room for the green gradient
tweak these values till you like the spacing */
padding: 130px 20px 50px;
}
<div class="box">
<p>content</p>
<p>content</p>
<p>content</p>
</div>