Home/ Questions/Q 442121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T21:02:25+00:00

I want to keep everything within the parent div but the second div goes

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0