Why does my second div go outside of the first div?_问答_开发者

Why does my second div go outside of the first div?

开发者 https://www.devze.com 2022-12-10 10:15 出处：网络

I want to keep everything within the parent div but the second div goes outside, as if starting a new row and I can\'t figure this out. Can someone please tell me why>

相关专题：css

I want to keep everything within the parent div but the second div goes outside, as if starting a new row and I can't figure this out. Can someone please tell me why>

Thanks.

<!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=windows-1250">
<title></title>
</head>
  <body>
    <div style="border:1px solid #000;">
      <h3>Title</h3>
      <p>Everything here expands with the parent div but the div just below this paragraph tag will not expand.</p><br />

      <div>
        <span style="float:left; width:49%; border:1px solid #000;">
          Book<br />
          <select id="book" name="book">
            <option value="">Select..</option>
          </select>
        </span>
        <span style="float:right; width:49%; border:1px solid #000;">
          Chapter<br />
          <input type="text" id="chapter" name="chapter" />
        </span>
      </div>

    </div>
  </body>
</html>

These are the new changes and renders correctly. Please see if I am missing anything else.

<!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=windows-1250">
<title></title>
</head>
  <body>
    <div style="border:1px solid #000;">
      <h3>Title</h3>
      <p>Everything here expands to the parent div but the div just below this paragraph tag will not expand.</p><br />

      <div>
        <span style="float:left; width:49%; border:1px solid #000;">
          Book<br />
          <select id="book" name="book">
            <option value="">Select..</option>
          </select>
        </span>
        <span style="float:right; width:49%; border:1px solid #000;">
          Chapter<br />
          <input type="text" id="chapter" name="chapter" />
        </span>
      </div>
      <div style="clear: both;"></div>

    </div>
  </body>
</html>

I would add the following styles to the div that contains the floating divs:

overflow: hidden;
zoom: 1;

The overflow setting ensures it fully wraps its floating child divs and the zoom setting is for IE browsers, to kick them into "hasLayout" mode. Using special empty divs with clear:both is a rather ugly, dated way of ensuring you have the correct layout.

There is an excellent article on the subject here: http://www.quirksmode.org/css/clearing.html although the article uses width: 100% to achieve the same end.

Since you’ve used float, that container has zero height as far as the parent container is concerned. To change that, put an extra dummy tag just before the end of the parent div: