Floating layout not working in Firefox

**euphoriastudio** · 10-25-2008, 05:34 PM

So my floating columns look prefect in IE ( I know...wth?! right?) but the center column is over flowing into the left column. What can I do to get it to work in both IE and Firefox. I need the entire page centered.

CSS:

Code:

        body {
background-color:#000000;
font: bold 12px/1.2em Tahoma;
color: #ACC35C;}

a, a:visited; a:active{color:#8E0E08;}
a:hover{color:#ACC35C;}
a.foot, a.foot:visited, a.foot:active {color:#404040; text-decoration:none;}
a.foot:hover{color:#8E0E08;}

div#body {
  margin: 0 auto;
  width: 800px;
  border: 1px solid #A2A079;
 }
	
	#top { position:relative;
	top:0px;
	left:0px;}
    #left {
	position:relative;
	float:left;
	top:-95px;
	left: 0px;
	width:145px;
}
	.lhead{
	margin-bottom: 2px;
	height:38px;
	width:143px;
}
	.ltxt {
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 10px;
}
	#middle{
	position:relative;
	top:-1px;
	left:0px;
	width:500px;
	height: 517px;
}
	.mhead{
	background-color:#600808;
	color:#FFFFFF;
	font: bold 14px/1.4em Tahoma;
	padding-left:5px;
	padding-top:15px;
	padding-bottom:2px;
	width:495px;
	height:17px;
	margin-bottom: 2px;
}
	.mtxt{
	width:468px;
	margin-left: 16px;
	margin-right: 16px;
	margin-bottom: 20px;
}
	#right{
position:relative;
	float:right;
	top:-95px;
	width: 155px;
}
	.rhead{
	margin-bottom: 2px;
	width:140px;
}
	.rtxt {
	margin-left: 8px;
	margin-right: 7px;
	margin-bottom: 10px;
color:#FFFFFF;
font: bold 14px/1.4em Tahoma;}

a.foot, a.foot:visited, a.foot:active {color:#FFFFFF; text-decoration:none;}
a.foot:hover{color:#792325;}

HTML:

HTML Code:

<body>
<div id="body"> 
<div id="top">
<img src="MainHeader.png" width="796" height="330" />
</div>

<div id="left">
<div class="lhead">
<img src="menu.png" width="143" height="38" />
</div>
<div class="ltxt">
Home<br />
Bookmark us<br />
Contact<br />
Search<br />
Forums<br />
</div>
<div class="lhead">
<img src="stickers.png" width="143" height="38" />
</div>
<div class="ltxt">
Start Here!<br />
By State<br />
By Catagory<br />
By Difficulty<br />
By Top Rated<br />
</div>
</div>

<div id="right">
<center>
<div class="rhead">
<img src="orpic.png" />
</div></center>
<div class="rtxt">
Off-Road Trails<br />
Link<br />
Link<br />
Link<br />
</div>
<center><div class="rhead">
<img src="kayak.png" />
</div></center>
<div class="rtxt">
Kayaking Routes<br />
Link<br />
Link<br />
Link<br />
</div>
<center><div class="rhead">
<img src="trail.png" />
</div></center>
<div class="rtxt">
Hiking Trails<br />
Link<br />
Link<br />
Link<br />
</div></div>

<div id="middle">
<div class="mhead">
Welcome!</div>
<div class="mtxt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu elit ac sem condimentum fringilla. Mauris a velit in nulla vehicula facilisis. Praesent metus. Vestibulum volutpat libero ac ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam faucibus. Integer ullamcorper congue ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse scelerisque tortor eu odio. Vestibulum fermentum. Proin imperdiet congue purus. Etiam quis velit ac sapien venenatis interdum. Donec eget magna ac est hendrerit pellentesque. Vivamus ut massa. Vivamus sem elit, pulvinar sed, pulvinar ut, tristique eu, neque. Donec vulputate arcu non sapien. Vestibulum vestibulum urna sed lacus. </div>
<div class="mhead">
Start Here!</div>
<div class="mtxt">
Pick a state below to view trails and stickers in that state!<p>
<center><img src="../map.png" width="400" height="248" /></center>
</p></div>
<div id="footer" style="position:relative; left:-145px; width:800px; height:103px; padding-top:40px; background-image:url(/img/foot.png); background-repeat:no-repeat; background-color:#000000; color:#ACC35C; font-size: 10px; text-align:center;">
<font color="#999999"> |<a href="#" class="foot"> home </a>|<a href="#" class="foot"> site map </a>|<a href="#" class="foot"> stickers </a>|<a href="#" class="foot"> off-road </a>|<a href="#" class="foot"> kayaking </a>|<a href="#" class="foot"> trails </a>|<a href="#" class="foot"> contact us </a>|</font><br><br>

All images and content &copy; Trails Completed 2008.</a>.

</div>
</div>
</div>
</body>
</html>

**TheJoshMan** · 10-25-2008, 05:53 PM

Code:

<div id="footer" style="position:relative; left:-145px; width:800px; height:103px; padding-top:40px; background-image:url(/img/foot.png); background-repeat:no-repeat; background-color:#000000; color:#ACC35C; font-size: 10px; text-align:center;">

getting rid of the highlighted will bring the div back into the center area...

Also, to align it more to the center you should use:

Code:

float:right;
margin:0 auto;

**euphoriastudio** · 10-25-2008, 07:30 PM

Thanks, i realized my biggest problem was trying to align it using pixels in the first place. Margins are my best friend!

I really appreciate the help thank you

**TheJoshMan** · 10-25-2008, 07:32 PM

no problem, glad to help

Thread: Floating layout not working in Firefox

Thread Tools

Search Thread

Floating layout not working in Firefox

The Following User Says Thank You to TheJoshMan For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions