Log in

View Full Version : Weird Float bug???



tonyking
07-27-2009, 10:43 PM
This is driving me absolutely bonkers. If anyone can spot what I'm missing I would greatly appreciate it. I'm trying to get a left menu div to float left, and a content div to float right. No matter how I mix and clear it up, firefox just can't get it right.

There's either misaligned div's, or a wide clear space above both. Anyone?



<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
DSA Main - &copy;2009 Davidson Surface / Air
</title><link rel="stylesheet" type="text/css" href="Css/style.css" /></head>
<body>
<div id="wrapper">
<form name="form2" method="post" action="Default.aspx?PId=0" id="form2">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4NzQ3MDEyNzUPZBYCAgMPZBYCAgEPZBYIAgEPDxYCHgRUZXh0BQlXZWxjb21lLCBkZAIDDw8WAh8ABQRUb255ZGQCBQ8PFgIfAAUES2luZ2RkAg0PDxYCHgdWaXNpYmxlaGRkZP2tHxMGtqjoZmyU7 IhVATqT1yyU" />
</div>


<div id="page_top">

<div id="welcome">

<span id="FrameTop_lblWelcome">Welcome, </span>
<span id="FrameTop_lblFirstname">Tony</span>
<span id="FrameTop_lblLastname">King</span>
</div>

</div>
<div id="nav">
<ul>
<li><a id="FrameTop_hlHome" href="Default.aspx?Pid=0">Home</a></li>

<li><a id="FrameTop_hlContact" href="Default.aspx?Pid=0">Contact</a></li>
<li><a id="FrameTop_hlHelp" href="Default.aspx?Pid=0">Help</a></li>
<li>
<a id="FrameTop_hlLogout" href="Default.aspx?Pid=2">Logout</a></li>
</ul>
</div>

<div style="clear:both; display:none;"></div>
<div id="left_menu">

Left
Menu
Content
</div>

<div id="main_container">
<div id="main_container_top">
<img src="/images/wh_tooling_ttl.png" alt="Warehouse Tooling" />
</div>
<div id="main_container_middle">
<div style="width:110px; text-align:center; float:left; margin-left:10px;">
<a id="ctl01_HyperLink1" title="Search All Tools" href="Default.aspx?Pid=100">

<img src="/images/search_tool_btn.png" /></a><br />
Search Tools
</div>
<div style="width:110px; text-align:center; float:left;">
<a id="ctl01_HyperLink2" title="Add New Tool" href="Default.aspx?Pid=100">
<img src="/images/new_tool_btn.png" /></a><br />
New Tool
</div>
<div style="width:110px; text-align:center; float:left;">
<a id="ctl01_HyperLink3" title="Find Orphan Tools" href="Default.aspx?Pid=100">

<img src="/images/orphan_tool_btn.png" /></a><br />
Orphan Tools
</div>
<div style="clear:both;"></div>
</div>
</div>
<div style="clear:both;"></div>

<div style="clear:both:"></div>
<div style="width:950px; height:20px; text-align:center; background-color:#FFFFFF;">
&copy; 2009 Davidson Surface / Air
</div>

<div style="clear:both:"></div>
</form>
</div>
</body>
</html>


And here's the css:
http://dsamain.com/Css/style.css

tonyking
07-28-2009, 12:26 AM
http://stlflops.com/ss.png

Here's a screenshot of what I mean, a live link is not possible. The right content should be at the top even with Left menu Content.

tonyking
07-28-2009, 04:23 PM
Fixed, forgot to add overflow:hidden attributes to my containers. Thanks for all the replies :rolleyes: