2

This is the content of <body> tag.

<div id="border">
    <p><h1 style="text-align: center;">Welcome to ABC Airline!</h1></p>
        <table caption="Choose your seat preference"
            style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
            <tr>
                <td><p id="dd">Window Side<input type="radio" name="side"/></p></td>
                <td><p id="dd">Front of plane<input type="radio" name="frontorback"/></p></td>
            </tr>
            <tr>
                <td><p id="dd">Aisle Side<input type="radio" name="side"/></p></td>
                <td><p id="dd">Middle of plane<input type="radio" name="frontorback"/></p></td>
            </tr>
            <tr>
                <td><p id="dd">Center Seat<input type="radio" name="side"/></p></td>
                <td><p id="dd">Back of plane<input type="radio" name="frontorback"/></p></td>
            </tr>
        </table>
    <p><input type="submit" value="next" style="float: right;"></p>
</div>

styles are defined like this:

#border{
    border: 2px solid black;
    border-radius: 25px;
    width: 50%;
    margin: auto;
    background-color: #ffc;
}
#dd{
    margin: 0.2em 0.2em 0.2em 0.2em;
}

And, this is the result run with Chrome in macOS.

enter image description here

The button is on the right side as I intended but it's out of the div block.. When style="float: right;" is not defined, it is not aligned to right but in the border.

enter image description here

I'd like to keep this inside the border. What should I do?

Yeongchan Jeon
  • 499
  • 3
  • 18

2 Answers2

0

Giving overflow: hidden fixes this. It is because of clearfix. This is the fix you are looking for:

#border {
  overflow: hidden;
  padding-bottom: 10px;
}

I have given an extra bottom padding to facilitate the whole button, instead of cutting it. You may even give a margin-right to the button to make it out of the border cut.

Snippet

#border {
  border: 2px solid black;
  border-radius: 25px;
  width: 50%;
  margin: auto;
  background-color: #ffc;
  overflow: hidden;
  padding-bottom: 10px;
}
#dd {
  margin: 0.2em 0.2em 0.2em 0.2em;
}
<div id="border">
  <p>
    <h1 style="text-align: center;">Welcome to ABC Airline!</h1>
  </p>
  <table caption="Choose your seat preference" style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
    <tr>
      <td>
        <p id="dd">Window Side
          <input type="radio" name="side" />
        </p>
      </td>
      <td>
        <p id="dd">Front of plane
          <input type="radio" name="frontorback" />
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p id="dd">Aisle Side
          <input type="radio" name="side" />
        </p>
      </td>
      <td>
        <p id="dd">Middle of plane
          <input type="radio" name="frontorback" />
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p id="dd">Center Seat
          <input type="radio" name="side" />
        </p>
      </td>
      <td>
        <p id="dd">Back of plane
          <input type="radio" name="frontorback" />
        </p>
      </td>
    </tr>
  </table>
  <p>
    <input type="submit" value="next" style="float: right;">
  </p>
</div>

Preview

preview

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Awesome! I learned one more style. thank you! Because it's written in 10 minutes please wait a few minutes to check this as an answer. – Yeongchan Jeon Dec 02 '16 at 07:49
  • ATTENTION: `overflow: hidden` should only be used to hide stuff. All other uses are PLAIN WRONG and cause inaccessibility. Beware when using this solution! – Mr. Hugo Dec 02 '16 at 08:24
0

The simple answer is 'use overflow auto to force BFC', like this:

overflow: auto;

Source: Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

Community
  • 1
  • 1
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60