Photo floating over page elements? - html

Question

I have a header photo, and usually they are fairly easy to set up. However, for some reason which I cannot find, the header image floats over the elements of the HTML page.
Any help would be appreciated. I have tried looking for any margins/padding I forgot to delete, but there are none.
Picture of problem...
HTML pertaining to header image:
<div id="gallery">
<div id="imgContain">
<img src="pictures/clubhouse.jpg">
</div>
</div>
My CSS File: (not sure where the problem is, so I posted all of it...)
html, body
{
margin: 0;
padding: 0;
background-attachment: fixed;
background-image: url('.././pictures/04.jpg');
background-color: rgb(56,32,32);
}
#font-face
{
font-family: fancyFont;
src: url('fonts/fancy.otf');
}
#wrapper
{
min-width: 1000px;
margin: auto;
}
#content
{
background-color: white;
display: table;
border-radius: 5px;
bottom: 0px;
left: 0;
margin: auto;
right: 0;
top: 0;
width: 915px;
height: 100%;
box-shadow: 5px 5px 22px black;
}
#content p
{
padding: 25px;
font-family: Arial;
text-indent: 30px;
font-size: 1em;
word-wrap: break-word;
}
center
{
border-bottom: 1px solid black;
}
table
{
border: 1px solid black;
float: left;
}
.main-table /*Main table is the navigation table to the left...*/
{
background-color: white;
margin-bottom: 25px;
border: 4px double white;
width: 245px;
box-shadow: 0px 0px 10px black;
}
.main-table td
{
padding: 10px;
padding-left: 15px;
}
.main-table td a
{
text-decoration: none;
color: black;
font-family: Arial;
transition: .2s;
font-size: .9em;
padding-left: 20px;
}
.main-table td a:hover
{
border-bottom: 1px solid black;
color: black;
padding-left: 50px;
transition: .2s;
}
.main-table h1
{
font-family: fancyFont;
padding:10px;
color: black;
text-shadow: 2px 2px 1px white;
}
.division /*Division(s) are the small info boxes in the center.*/
{
margin-top: px;
margin-left: 40px;
border: none;
margin-bottom: 0px;
}
.division th
{
width: 250px;
background-color: white;
border-bottom: 3px double black;
padding: 10px;
font-family: fancyFont;
}
.division tr td
{
display: inline-block;
width: 250px;
height: 100px;
max-width: 250px;
}
#gallery
{
width: 100%;
height: 100px;
}
#gallery h1
{
font-family: fancyFont;
text-shadow: 2px 2px 1px #acacac;
}
#gallery img
{
width: 100%;
height: 450px;
border-bottom: 1px solid black;
}
table ul li
{
list-style: square;
font-family: Arial;
}
#imgContain
{
background-color: white;
width: 100%;
margin: 0;
padding: 0;
}
#table-container
{
width: 900px;
margin: 0;
}

Answer 1

take out the
#gallery{height:100px;}
css because your gallery img height is 450px and the two conflict.

Answer 2

An element will "float" over another element when the floating element's position is set to absolute. I don't see position: absolute; in your CSS, but I do see positioning styles (bottom: 0px; left: 0; etc.) so maybe another style sheet is applying position: absolute. Best way would be to inspect the elements using a browser inspector like Firefox has and see what CSS styles are being applied. You can send me the URL and I will look at it. If you just want to throw a dart at the board you could try setting this style:
#gallery {
position: static !important;
}

Answer 3

Floating generally happens when position: absolute is set in CSS, but strangely, it's not your case.
So, you can try to add a CSS property to this image, called z-index with the value of -1. It'll possibly work.
This property is a kind of "layers". By default, every element is set in z-index: 0.
So, basically, it'll be:
img {
z-index: -1;
}
or, in this case:
#gallery {
z-index: -1;
}
Sorry if my english is bad.