Hi guys, I'm having a problem trying to get one of my pages layed out correctly. I wish to have contact details and adresses on the left hand side, a google map iframe to the right and all contained within an auto height content container. Below that should be a sitemap displayed.
Now for some reason, the footer will not align itself below the content (this only happens when I used float)
Here is the code I have so far:
<div id="container">
<div id="header">
<div id="nav_container">
<div id="logo"><a href="/demo/index.html"><img src="/images/logo.png" width="203" height="72" alt="mytiles logo" /></a>
</div>
<div id="nav">
<ul>
<li><a href='/demo/index.html' class="left" >Home</a></li>
<li><a href='/demo/products.html' class="mid" >Products</a></li>
<li><a href='/demo/portfolio.html' class="mid" >Portfolio</a></li>
<li><a href='/demo/branches.html' class="mid" >Branches</a></li>
<li><a href='/demo/about.html' class="mid" >About Us</a></li>
<li><a href='/demo/contact.html' class="right" >Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div id="bodycontent">
<div id="contactinfo">
<h4>Mytiles Bangor</h4>
Unit 4,<br />
68 Balloo Road,<br />
Bangor,<br />
County Down,<br />
BT19 7PC<br />
028 9145 5997
<h4>Mytiles Derry/Londonderry</h4>
12 Elagh Business Park East,<br />
Buncrana Rd,<br />
Londonderry,<br />
BT48 8QP<br />
028 7135 6001
<h4>Mytiles Newtownabbey</h4>
Unit 11c Abbey Trading Centre,<br />
Longwood Rd,<br />
Newtownabbey,<br />
BT37 9UQ<br />
028 9086 0106
</div>
<div id="map">
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps/ms?f=q&source=s_q&hl=en&geocode=&ie=UTF8&hq=&hnear=12+Elagh+Business+Park+E,+Buncrana+Rd,+Londonderry,+County+Londonderry+BT48+8QP,+United+Kingdom&msa=0&msid=113021723795548444461.00048b4aa12ad48849a7b&ll=54.781682,-6.591797&spn=1.108773,2.334595&z=8&output=embed">
</iframe><br />View <a href="http://maps.google.co.uk/maps/ms?f=q&source=embed&hl=en&geocode=&ie=UTF8&hq=&hnear=12+Elagh+Business+Park+E,+Buncrana+Rd,+Londonderry,+County+Londonderry+BT48+8QP,+United+Kingdom&msa=0&msid=113021723795548444461.00048b4aa12ad48849a7b&ll=54.781682,-6.591797&spn=1.108773,2.334595&z=8" style="color:#0000FF;text-align:left">Mytiles</a> in a larger map
</div>
</div>
<div id="footer">
<div id="sitemap">
<h2>Sitemap</h2>
<ul>
<li><a href='/demo/index.html' >Home</a></li>
<li><a href='/demo/products.html' >Products</a></li>
<li><a href='/demo/portfolio.html' >Portfolio</a></li>
<li><a href='/demo/branches.html' >Branches</a></li>
<li><a href='/demo/about.html' >About Us</a></li>
<li><a href='/demo/contact.html' >Contact Us</a></li>
</ul>
</div>
</div>
</div>and my CSS
@charset "utf-8";
/* CSS Document */
#container{
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
position: absolute;
}
#header{
position:fixed;
z-index:999999;
left:0;
top:0;
height:100px;
width:100%;
padding: 0px;
background-color: #fff;
background-image: url(../images/nav.png);
background-repeat: repeat-x;
background-position: left bottom;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ddd;
}
#nav_container{
width:920px;
margin-left:auto;
margin-right:auto;
}
#logo{
float: left;
height: 72px;
width: 203px;
position: relative;
top: 15px;
}
img
{ border-style: none;
}
#nav{
float:right;
}
#nav ul{
height:25px;
list-style:none;
margin-left:auto;
margin-right:auto;
margin-top: -1px;
}
#nav ul li{
display:inline;
float:left;
background-repeat: repeat-x;
}
#nav ul li:active{
background-image: url(/images/nav_blue_left_hover.png);
}
#nav ul li .left{
background-image: url(/images/nav_blue_left.png);
}
#nav ul li .left:hover{
background-image: url(/images/nav_blue_left_hover.png);
}
#nav ul li .mid{
background-image: url(/images/nav_blue.png);
}
#nav ul li .mid:hover{
background-image: url(/images/nav_blue_hover.png);
}
#nav ul li .right{
background-image: url(/images/nav_blue_right.png);
background-position: right;
}
#nav ul li .right:hover{
background-image: url(/images/nav_blue_right_hover.png);
background-position: right;
}
#nav a{
font-size:15px;
font-weight:normal;
float:left;
color:#FFF;
text-decoration: none;
cursor: pointer;
line-height:25px;
font-family: Arial, Helvetica, sans-serif;
background-repeat: repeat-x;
background-position: left center;
vertical-align: middle;
width: 100px;
text-align: center;
}
#nav a:hover{
background-image: url(/images/nav_blue_hover.png);
}
#bodycontent{
position:relative;
height:auto;
width:860px;
margin-right: auto;
margin-left: auto;
padding-top: 130px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333;
text-align: justify;
padding-bottom: 30px;
}
#footer{
height:auto;
width:100%;
background-color: #333;
position: relative;
bottom: 0px;
}
#sitemap{
height:auto;
width:860px;
margin-right:auto;
margin-left:auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0;
position: relative;
padding-top: 10px;
padding-bottom: 20px;
}
#sitemap a{
color: #CCC;
font-style: normal;
}
#line{
margin-top: 10px;
margin-bottom: 20px;
background-image: url(/images/nav.png);
height: 35px;
width: 100%;
background-repeat: repeat-x;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ddd;
}
h1{
font-size: 24px;
}
h2{
font-size: 20px;
}
h3{
font-size: 18px
}
h4{
font-size: 16px;
}
#contactinfo{
position: relative;
height: auto;
width: auto;
float: left;
}
#map{
padding-top: 20px;
float: right;
}Sorry for it being so long, it's getting a bit too much to read through lol. ANd I'm sure there are plenty of other erros in it somewhere....
Thanks