...

View Full Version : Float Issue (spot the error?:s)



kelly3330
11-19-2008, 11:21 PM
Please help if someone could point out the mistake it would really be appreciated, ive been working on this but.. i have a floated right nav bar at the end of the page, problem is, now when i view in firefox the nav bar float (right) drops to the bottom of the page. I realise this may be caused because of the width of my container and the div widths inside may be bigger, but ive searched through it over and over and just cant find out where the problem lies.:confused::(





body {
background: #CCCCCC;
color: #000000;
}

#wrapper {
position: relative;
margin: 0 auto;
width: 950px;
padding: 5px;
background: #FFFFFF;
color: #000000;
}



<body>
<div id="wrapper">

<div id="header">
<div id="span"></div>


<div id="logo"><img src="images/logo.gif" alt="" /></div>

</div>

<div id="topnav">

<ul>
<li><a href="default.asp">Home</a></li>
<li id="login_button"><a href="#" onclick="mw_logout(); return false;">Log Out</a></li>
<li><a href="update-profile.asp">My Profile</a></li>

<li><a href="blog.asp">Bradley's Blog</a></li>

<li><a href="forum.asp">Forums</a></li>
<li><a href="about.asp">About Us</a></li>
</ul>

<div id="endbox"></div>
</div>


<div id="contentwrapper">

<div id="content">




<div id="main">

<div class="singlecolheader"></div>
<div class="singlecolwrapper">
<div class="col">
<h1 style="color:#000000;">MI Group Advertising Details</h1>
<div style="float:left; border:1px solid black;height:auto; width:740px;">

<h2>Link with Banners</h2>
</p>
<div style="width:369px;height:auto;float:left;">
<p><img style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" src="images/features/link-to-us/approvedbanner8.jpg"border="1" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden"><a href="" alt="" title="Join us " width="460" height="60" style="margin:5px;"><img src="g"/></a></textarea>
<span class="wrap"> This banner is 468 by 60 px.</span></p>

</div>



<div style="width:369px;height:auto;float:left;">
<p><img style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" src="" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden;"> <<a href="" alt="J" title="Join us " width="460" height="60" style="margin:5px;"><img src="g"/></a></textarea>
<span class="wrap"> This banner is 468 by 60 px.</span></p>

</div>



<div style="width:369px;height:auto;float:right;">
<p><img style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" src="" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden;"> <a href="" alt="" title="Join us " width="460" height="60" style="margin:5px;"><img src="g"/></a></textarea>
<span class="wrap"> This banner is 468 by 60 px.</span></p>

</div>


<div style="width:369px;height:auto;float:right;">
<p>
<img src="ig" width="316" height="45" style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" />
<p>&nbsp;</p><p>&nbsp;</p>

<textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden;"><a href="" alt="Join us at " title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
<span class="wrap"> This banner is 468 by 60 px</span></p>
</div>


<h1>Link With Buttons</h1>


<div class="seperator"></div>
<h2>Buttons</h2>
<div style="width:200px;height:auto;float:left;">
<img style="margin:5px 5px 5px 5px;width:120px;height:60px;" src="images/features/link-to-us/MI-Link-120-60.jpg" />
<p>
<textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="pg" alt="" title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
</p>
</div>
<div style="width:200px;height:auto;float:left;padding-left:80px;">
<img style="margin:5px 5px 5px 5px;width:120px;height:60px;" src="images/features/link-to-us/BS-Link-120-60-V1.jpg" />
<p>
<textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="g" alt="Join usg" title="Join us rking" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
</p>
</div>
<div style="width:200px;height:auto;float:right;">
<img style="margin:5px 5px 5px 5px;width:120px;height:60px;" src="ima/ukeastamp.gif" border="1"/>
<p>
<textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="J" title="king" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
</p></div>


<div style="width:200px;height:auto;float:left;">
<img style="margin:5px 5px 5px 5px;width:160px;height:146px;" src="images/features/link-to-us/approved.jpg" target="_blank"/>
<p><textarea style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="" title="Jg" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea></p>
</div>




<div style="width:200px;height:auto;float:left;padding-left:80px;padding-top:10px;">
<img style="margin:5px 5px 5px 5px;width:120px;height:120px;" src="images/features/link-to-us/BS-Link-120-120-V2.jpg" />
<p>
<textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="" title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
</textarea>
</p>
</div>


<div style="width:200px;height:auto;float:right;padding-left:50px;padding-top:10px;">
<img style="margin:5px 5px 5px 5px;width:120px;height:120px;" src=".gif" />
<p>
<textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="Join us " title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
</textarea>
</p>
</div>






<div class="seperator"></div>
<h2>Skyscraper Advertisers</h2>



<div style="padding-left:20px;width:200px;height:auto;float:left;">
<img style="margin:5px 5px 5px 10px;width:120px;height:600px;align:center;" src="images/features/link-to-us/skyscraperapproved.jpg" />
<p><textarea style="width:120px; height:60px;overflow-x:hidden"><a href="" alt="g" title="Jg" width="120px" height="600px" style="margin:5px;"></textarea></p>
</div>


<div style="width:200px;height:auto;float:left;"padding-left:50px;>
<img src="images/features/link-to-us/BS-Skyscraper447x120.jpg" align="middle" style="margin:5px 5px 5px 10px;width:120px;height:600px" />
<p><textarea style="width:120px; height:60px;overflow-x:hidden"><a href="" alt="Jng" title="Jorking" style="margin:5px;"></textarea></p>

</div>
<div style="width:200px;height:auto;float:left;">
<img style="margin:5px 5px 5px 10px;width:120px;height:600px;" src="images/features/link-to-us/MI-120-600.jpg" />
<p><textarea style="width:120px; height:60px;overflow-x:hidden"><a href="hto-us/MI-120-600.jpg" alt="J" title="" width="120px" height="600px" style="margin:5px;"></textarea></p>

</div>


<div class="seperator"></div>
<div style="padding-left:20px;">
<h2>Text Links</h2><br/>
<br/>
<textarea style="width:150px; height:40px; overflow-x:hidden ;"><a href="wm"></a></textarea> <br/>
We are listed ons<br/>
<textarea style="width:150px; height:40px; overflow-x:hidden ;"><a href="www.om">We are listed </a></textarea> <br/>
We are a part of the UKEA Join Us <br/>
<textarea style="width:150px; height:40px; overflow-x:hidden ;"><a href="http://www.">We are a part of the join Us</a></textarea> <br/>

</div>


<div class="seperator"></div>
<h2>Not finding one that takes your fancy?</h2>
<p>We will create an Advertisement, whether it be a button or a banner for you to put on your website, so that its tailored for your site. We understand how important it is for your website to look its best, so thats why we will create a different banner, button or advert, so that you can be a proud member without having to alter the look of your own page!<br/>
<a href="mailto:Kelly"><img src="images/features/link-to-us/mail.gif" alt="Email" width="80" height="80" border="0" align="absmiddle" />Email: <a href="mailto:Km">m</a></p>
</div>




</div>
</div>




<div style="clear:both;"></div>



<div id="navcolumn">


<ul>
<li><a href="member-benefits.asp">Member Benefits</a></li>
<li><a href="member-spotlight.asp">Member Spotlight</a></li>
<li><a href="members.asp">Member Database</a></li>
<li><a href="mitube.asp">I Tube</a></li>
<li><a href="coming-soon.asp?page=Mi%20Chat">MI Chat</a></li>

<li><a href="angels-den.asp">Angels Den</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="coming-soon.asp?page=Jobs">Mi Jobs</a></li>
<li><a href="future.asp">Future</a></li>
<li><a href="business-sos.asp">Business SOS</a></li>
<li><a href="business-pr.asp">Business PR</a></li>

<li><a href="coming-soon.asp?page=Business%20For%20Sale">Business For Sale</a></li>
<li><a href="http://om" target="_blank">r</a></li>
<li><a href="http:/om" target="_blank">r</a></li>
<li><a href="http://www.n.com" target="_blank">UKEA</a></li>
<li><a href="contact.asp">Contact Us</a></li>
</ul>


<div id="magazine">

</div>

<div id="newsletter">
<div id="newsletterheader"></div>
<div id="newsletterbody">
<h2>Newsletter</h2>

<p>Keep up to date with the latest developments with the newsletter. Find out what&rsquo;s new, read what our members are talking about and view our spotlight section. To receive our monthly newsletter, simply enter your name and e mail address.</p>

<form action="newsletter.asp" method="post" enctype="application/x-www-form-urlencoded" name="frmNewsletter" id="frmNewsletter">
<label for="frmN_Name">Name:</label>
<input name="frmN_Name" type="text" id="frmN_Name" value="" />
<label for="frmN_Email">Email:</label>
<input name="frmN_Email" type="text" id="frmN_Email" value="" />

</form>
<p class="hidden" id="newslettermessage">&nbsp;</p>
<div class="wrap"><a href="#" id="subscribebutton" onclick="mw_subscribe();return false;">Subscribe</a></div>

</div>
<div id="newsletterfooter"></div>
</div>

</div>
<div style="clear:both;"></div>

</div>

<div id="columnend"></div>

<div id="footer">
<div id="copyright">

<p>&copy; <a href="docs/PrivacyPolicy.pdf">Privacy Policy</a> | <a href="about.asp">About Us</a> | <a href="docs/tandc.pdf">Terms &amp; Conditions</a> | <a href="investor-relations.asp">Investor Relations</a> | <a href="recommended-sites.asp">Recommended Sites</a> | <a href="advertise.asp">Advertise With Us</a>

<!-- | Jobs e--></p>
<p>Company Registration : </p>
</div>
</div>
</div>
</body>
</html>

Doctor_Varney
11-20-2008, 01:36 AM
A game of spot the error...? Er... no thanks!

You should have posted only the salient code. Posting everything is irritatingly unnecessary.

I can't tell from this, which the element in question is, which is dropping out. Is it "topnav"? There's no style attached to that element, that I can see.

The clear command is probably what you want in there (somewhere), but without a link to the live site and without proper information, plus all that to trawl through, I don't think I can help you.

Sorry.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-20-2008, 11:57 AM
You do not have a DOCTYPE

You do also have errors here. (http://validator.w3.org/check?uri=http%3A%2F%2Fexitfegs.co.uk%2Faahello.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

And more here. (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fexitfegs.co.uk%2Faahello.html&profile=css21&usermedium=all&warning=1&lang=en)

I have put the page on my site for convenience.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum