0

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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;ie=UTF8&amp;hq=&amp;hnear=12+Elagh+Business+Park+E,+Buncrana+Rd,+Londonderry,+County+Londonderry+BT48+8QP,+United+Kingdom&amp;msa=0&amp;msid=113021723795548444461.00048b4aa12ad48849a7b&amp;ll=54.781682,-6.591797&amp;spn=1.108773,2.334595&amp;z=8&amp;output=embed">
		</iframe><br />View <a href="http://maps.google.co.uk/maps/ms?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;ie=UTF8&amp;hq=&amp;hnear=12+Elagh+Business+Park+E,+Buncrana+Rd,+Londonderry,+County+Londonderry+BT48+8QP,+United+Kingdom&amp;msa=0&amp;msid=113021723795548444461.00048b4aa12ad48849a7b&amp;ll=54.781682,-6.591797&amp;spn=1.108773,2.334595&amp;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

2
Contributors
3
Replies
5
Views
8 Years
Discussion Span
Last Post by fubofo
0

Well it would seem I have fixed the issue myself. I simply gave the #contactinfo and #map fixed widths and gave the #footer clear:both (this pushed the footer below the floats) - plus a little margin-bottom added to #contactinfo to seperate the footer and content divs more.

Rookie mistake, my bad :)

0

However you found the issue by ur self. That's good anyway. If you thought this post is solved. Than please click on the "Make this thread solved" which shown in the below. So that, threads are get reduced in this forum. Thanks!!!

0

AAh my bad, new here did'nt know there was a 'Mark this Thread as Solved'

thx

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.