SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to prevent Floting Divs from Wrapping

    This topic has been covered here before but I am not able to apply it to my specific example. I have two floating divs but when the browser window is resized the right side div wraps under teh left side div. This happen in IE at least. How can I prevent this from happening. I tried min-width and no-wrap but I cannot seem to make it work.

    The main header area:

    Code:
    <div id="header-graphics">
    <p id="header-stc-logo"><a href="/index.asp" title="STC home"><img src="/images/new-stc-logo.gif" width="197" height="100" alt="STC Home" /></a></p>
    <div id="header-advertising">
    div>
    </div>
    
    #header-advertising { margin-top: 20px;margin-bottom: 20px; white-space: nowrap;}
    http://www.stc.org
    -=SunnaH=-

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you apply a min-width to your header-graphics wrapper that is large enough to contain the two floats then they won't wrap.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #header-graphics {
        min-width:800px;
    }
    #header-advertising {
        float:right;
        background:red;
    }
    #header-stc-logo {
        float:left;
        background:blue;
    }
    </style>
    </head>
    <body>
    <div id="header-graphics">
        <p id="header-stc-logo">test<a href="/index.asp" title="STC home"><img src="/images/new-stc-logo.gif" width="197" height="100" alt="STC Home" /></a></p>
        <div id="header-advertising">test </div>
    </div>
    </body>
    </html>
    If the floats add up to more than your min-width then they will just wrap to the next line.

  3. #3
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thank you very much. I will remember.
    -=SunnaH=-


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •