How to prevent Floting Divs from Wrapping

HTML & CSS
1

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:

<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

2

Thank you very much. I will remember.

3

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.


<!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.