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 Code:

<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="/wEPDwULLTE4NzQ3MDEyNzUPZBYCAgMPZBYCAgEPZBYIAgEPDxYCHgRUZXh0BQlXZWxjb21lLCBkZAIDDw8WAh8ABQRUb255ZGQCBQ8PFgIfAAUES2luZ2RkAg0PDxYCHgdWaXNpYmxlaGRkZP2tHxMGtqjoZmyU7IhVATqT1yyU" />
</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

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

Thread: Weird Float bug???

Thread Tools

Search Thread

Weird Float bug???

Bookmarks

Bookmarks

Posting Permissions