[CSS]Pozicioniranje footer diva

Pozdravljeni

Spet se pojavljam z novim problemom glede postavitve elementov. Na strani imam header, content in ostalo loceno, tako da ima vsak segment svoj "glavni" div, ki potem vsebuje nadaljne elemente. Najprej je header, potem div za prikaz zadnjih slik, za njem content in nazadnje naj bi prisel se footer. Problem pa se pojavi, da mi footer noce postaviti na konec strani. Namesto, da bi bil na koncu, obstane takoj za divom za zadnje slike. Kar hocem bolje prikazuje spodnja slika. Koda vem, da je dalec od lepe ampak ok, se se lovim. Css od galerije zadnjih slik ne bom pripenjal, ker gre za jqueryjev plugin in je ogromno css-ja. Kolikor sem testiral nima povezave z mojim problemom. Na sliki pucica prikazuje kam naj bi prisel footer in kje je sedaj. Torej, kje bi lahko bil problem? Aja in glavni div za header ima position: relative, ker imam v notranjosti headerja par elementov postavljenih absolutno. Ker je header skos staticen, nebi smelo biti tezav.





HTML:

Koda:

<div id="mycarousel" class="jcarousel-skin-moja"> 
    <ul> 
        <li><img src="gallery/500.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/cerkva-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0004.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0053.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0069.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0119.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/DSC_0177_BW.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/glavni-trg.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/hdr_2.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/jagode.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/kitara_clean_1.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/kontrastna_1-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/love.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/slika.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/speed3.jpg" alt="cerkva" width="100" height="65" /></li> 
        <li><img src="gallery/zarnca_finish.jpg" alt="cerkva"  height="65" /></li> 
    </ul> 
</div> 
<div id="mainContent"> 
   <div id="mainContentLeft" class="content"></div> 
        <div id="mainContentCenter" class="content"> 
          <div id="mainContentWarper"> 
            <p>asdasdsad</p> 
              <p>asd</p> 
              <p>asd</p> 
              <p>as</p> 
              <p>sd</p> 
              <p>sd</p> 
              <p>sd</p> 
              <p>sd</p> 
          </div> 
        </div> 
     <div id="mainContentRight" class="content"></div> 
</div> 
<div id="mainContentBottom"> 
    <div id="mainContentBottomLeft"><img src="img/content_kot_levo.png" alt="levo" /></div> 
    <div id="mainContentBottomCenter"></div> 
    <div id="mainContentBottomRight"><img src="img/content_kot_desno.png" alt="desno" /></div> 
</div> 
<div id="footer"></div>

CSS:

Koda:

/* ==== Main Content === */ 
#mainContent { 
   width: 100%; 
} 
#mainContent #mainContentLeft { 
   background-image: url(../img/content_levo.png); 
   background-repeat: repeat-y; 
   width: 40px; 
   background-position: right; 
   float: left; 
} 
#mainContent #mainContentRight { 
   background-image: url(../img/content_desno.png); 
   background-repeat: repeat-y; 
   width: 30px; 
   background-position: left; 
   float: left; 
} 
#mainContent  div#mainContentCenter { 
   background-image: url(../img/content_bg.png); 
   background-repeat: repeat-x; 
   width: 93.5%; 
   float: left; 
   background-color: #FFFFFF; 
} 
#mainContentCenter  #mainContentWarper  { 
   padding: 5px; 
} 
div#mainContentBottom /* ==== Main Content Bottom === */ 
{ 
   width: 100%; 
   z-index: 1; 
} 
#mainContentBottom #mainContentBottomLeft { 
   width: 40px; 
   float: left; 
   text-align: right; 
} 
#mainContentBottom #mainContentBottomRight { 
   width: 30px; 
   float: left; 
} 
#mainContentBottom   #mainContentBottomCenter { 
   width: 93.5%; 
   float: left; 
   height: 35px; 
   background-image: url(../img/content_bottom.png); 
   background-repeat: repeat-x; 
} 
#footer    { 
   height: 50px; 
   width: 100%; 
   background-color: #00FF00; 
} 

dve možnosti:
1) glavnemu div-u ki je neposredno pred footerjem (se pravi mainContentcontent) v css-u daj clear:both
2) na dnu mainContent diva daj v prazen div z recimo class .clear in pol v css-u daj clear:both;

Bom dal kar celotno kodo sem in prikazal kako naj bi zgledalo.

Zgledalo naj bi takole. Se pravi footer je spodnji "trak" oziroma zadnji div na katerega kaze puscica.



Naredi mi pa tole. Spodnji oziroma footer div mi vedno spravi na oznaceno mesto, neglede na to kar sem probal je vedno isto. Puscica kaze kje je footer div.



Tole je celoten HTML:

</head>
<body>
<div id="header">
  <div id="nav">
      <ul>
        <li><a href="#"><img src="img/domov.png" alt="Home" width="133" height="77" /></a></li>
        <li><a href="#"><img src="img/omeni.png" alt="O Meni" width="129" height="77" /></a></li>
        <li><a href="#"><img src="img/novice.png" alt="Interesi" width="122" height="77" /></a></li>
        <li><a href="#"><img src="img/blog.png" alt="Blog" width="111" height="77" /></a></li>
        <li><a href="#"><img src="img/galerija.png" alt="Galerija" width="138" height="77" /></a></li>
        <li><a href="#"><img src="img/kontakt.png" alt="Kontakt" width="160" height="77" /></a></li>   
      </ul>
 </div>
  <div id="login">
    <div class="box" id="loginMiddle">
      <div id="loginButton"><img src="img/login_button.png" alt="login button" width="88" height="47" /></div>
                <div class="loginBg" id="uname"><img src="img/loginbox_left.png" alt="login left"/>
               	  <div class="loginWarper"><img src="img/loginbox_right.png" alt="login right"/></div>
                </div>
                <div class="loginBg" id="pass"><img src="img/loginbox_left.png" alt="login left"/>
               	  <div class="loginWarper"><img src="img/loginbox_right.png" alt="login right"/></div>
                </div>
            <div id="loginRegistration">Niste registrirani? <span style="color:#2d5225">Registracija!</span></div>
        </div>
  <div id="loginBottom">
       <div id="loginArrow" class="bottomArrowUp"></div>
       		<input id="loginUp" type="image" alt="bottom" src="img/loginbox2.png"  />
    </div>
  </div>
  <div id="search">
    <div class="box" id="searchMiddle">
      <div id="searchBar"><img src="img/searchbar_left.png" alt="search left" width="4" height="30" />
            	<div id="searchButton"><img src="img/searchbar_button.png" alt="search button" /></div>
              	<input name="searchInput" type="text" class="textbox" id="searchInput" />
      </div>
   </div>
       <div id="searchBottom">
            <div id="searchArrow" class="bottomArrowUp"></div>
            <input type="image"  alt="bottom" id="searchUp"  src="img/loginbox2.png"  />
       </div>
  </div>
  <div id="logo"><img src="img/logo.png" alt="logo" width="257" height="59" /></div>
</div>
<div id="mycarousel" class="jcarousel-skin-moja">
    <ul>
   	  <li><img src="gallery/500.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/cerkva-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0004.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0053.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0069.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0119.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/DSC_0177_BW.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/glavni-trg.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/hdr_2.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/jagode.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/kitara_clean_1.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/kontrastna_1-(1-of-1).jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/love.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/slika.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/speed3.jpg" alt="cerkva" width="100" height="65" /></li>
        <li><img src="gallery/zarnca_finish.jpg" alt="cerkva"  height="65" /></li>
    </ul>
</div>
<div id="mainContentWarper">
    <div id="mainContent">
        <div id="mainContentLeft" class="content"></div>
            <div id="mainContentCenter" class="content">
              <div id="mainContentWarper">
                <p>asdasdsad</p>
                  <p>asd</p>
                  <p>asd</p>
                  <p>as</p>
                  <p>sd</p>
                  <p>sd</p>
                  <p>sd</p>
                  <p>sd</p>
              </div>
            </div>
        <div id="mainContentRight" class="content"></div>
        <div id="mainContentBottom">
            <div id="mainContentBottomLeft"><img src="img/content_kot_levo.png" alt="levo" /></div>
            <div id="mainContentBottomCenter"></div>
            <div id="mainContentBottomRight"><img src="img/content_kot_desno.png" alt="desno" /></div>
        </div>
    </div>
	<div id="footer"></div>
</div>
</body>
</html>

Tole je celoten CSS:

@charset "utf-8";
/* CSS Document */

/* ==== Global === */

body {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-image: url(../img/main_bg.png);
}
input {outline: none;}
li {list-style-type: none;}



/* ==== Classes === */

.box {
	background-image: url(../img/loginbox_bg.png);
	background-repeat: repeat-y;
}
.bottomArrow {
	position: absolute;
	left: 125px;
	background-image: url(../img/down.png);
	background-repeat: no-repeat;
	height: 9px;
	width: 9px;
}
.bottomArrowUp {
	position: absolute;
	left: 125px;
	background-image: url(../img/up.png);
	background-repeat: no-repeat;
	height: 9px;
	width: 9px;
}
.boxMiddle  {
	height: 78%;
	background-image: url(../img/loginbox_bg.png);
	background-repeat: repeat-y;
	width: 100%;
}
.loginWarper {
	width: 3px;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.loginBg {
	background-image: url(../img/loginbox_center.png);
	background-repeat: repeat-x;
	height: 21px;
	width: 140px;
	position: absolute;
}
.textbox {
	outline: none;
	border: none;
	background: transparent;
}


/* ==== Header === */

#header {
	height: 218px;
	background-image: url(../img/bg.jpg);
	background-repeat: repeat-x;
	width: 100%;
	position: relative;
}

#header #logo {
	position: absolute;
	top: 20px;
	left: 34px;
}




/* ==== Main Menu === */


#header  div#nav {
	position: absolute;
	bottom: 20px;
	left: 15%;
	width: 850px;
	height: 77px;
	display: inline;
}


/* ==== Login Box === */
#header div#login {
	width: 254px;
	float: right;
	margin-right: 20px;
	position: relative;
}
#login #loginMiddle {
	height: 100px;
}
#login #loginBottom #loginTitle {
	color: #B47E86;
}
#loginMiddle  #uname {
	position: relative;
	left: 10px;
	bottom: 35px;
}
#loginMiddle  #pass {
	position: relative;
	bottom: 30px;
	left: 10px;
}
#loginMiddle #loginButton {
	position: relative;
	width: 88px;
	height: 47px;
	top: 12px;
	left: 155px;
}
#loginMiddle #loginRegistration {
	position: absolute;
	bottom: 25px;
	height: 14px;
	left: 10px;
	color: #18484c;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: 100%;
}



/* ==== Search Box === */

#header  div#search {
	width: 254px;
	float: right;
	margin-right: 20px;
	position: relative;
}
#search  #searchMiddle {
	height: 70px;
	position: relative;
}
#search #searchBottom #searchTitle {
	color: #62cb4c;
}
#searchBar #searchInput {
	width: 155px;
	height: 30px;
	position: absolute;
	top: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #365B55;
}
#searchBar #searchButton {
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#search   div#searchBar   {
	height: 30px;
	background-image: url(../img/searchbar_bg.png);
	background-repeat: repeat-x;
	width: 225px;
	position: relative;
	left: 15px;
	top: 20px;
}
#nav img {
	border: none;
	outline: none;
}
#nav a {
	border: none;
	outline: none;
}
#nav li {
	display: inline;
	margin-left: -4px;
}
#nav ul {
	display: inline;
}
div#mainContent /* ==== Main Content === */
 {
	width: 100%;
	clear: both;
}
#mainContent #mainContentLeft {
	background-image: url(../img/content_levo.png);
	background-repeat: repeat-y;
	width: 40px;
	background-position: right;
	float: left;
}
#mainContent #mainContentRight {
	background-image: url(../img/content_desno.png);
	background-repeat: repeat-y;
	width: 30px;
	background-position: left;
	float: left;
}
#mainContent  div#mainContentCenter {
	background-image: url(../img/content_bg.png);
	background-repeat: repeat-x;
	width: 93.5%;
	float: left;
	background-color: #FFFFFF;
}
#mainContentCenter  #mainContentWarper  {
	padding: 5px;
}
div#mainContentBottom /* ==== Main Content Bottom === */
 {
	width: 100%;
	z-index: 1;
}
#mainContentBottom #mainContentBottomLeft {
	width: 40px;
	float: left;
	text-align: right;
}
#mainContentBottom #mainContentBottomRight {
	width: 30px;
	float: left;
}
#mainContentBottom   #mainContentBottomCenter {
	width: 93.5%;
	float: left;
	height: 35px;
	background-image: url(../img/content_bottom.png);
	background-repeat: repeat-x;
}
#footer    {
	height: 96px;
	width: 100%;
	background-color: #00FF00;
}
.clear {
	clear: both;
}

Super, hvala vam fantje. Div je postavilo spodaj zdej. Zdej pa sam se eno vprasanje. A je varjanta, da ta div nekoliko postavim pod content div, kot je v moji prejsnji objavi na sliki prikazano.