Jump to content

I can't get rid of the left and right margins


hikingwithu2

Recommended Posts

I have a page with several <div>'s and one of them has left and right margins that I just cannot get rid of. The basic layout is this:

| 1 || 2 |

| 3 || 5 |

| 4 || 5 |

| 6 |

 

<div> 4 is the problem area, it has left and right margins that I cannot get rid of. I expect it to be the same width as the <div> above it (3). As you will see in the code I have enclosed the two <div>'s 3 & 4 in their own <div> which includes w3-margin-0 and w3-padding-0, and just to test it I also added the style=width:100% to the <div> 4. Yet I still have those doggone margins. They are spoiling the layout/look of the page.

 

Please have a look and help me figure out how to get that <div>4 to be the same width as the one above it (<div>3). The problem code is the <div> with the color: orange, below the <div> with the color:red.

Thanks,

Chip


<html>

  <head>

    <title></title>

  </head>

  <body>

    <div class="w3-container w3-large w3-responsive" style="max-width: 100%;">

      <div class="w3-row">

        <div class="w3-container w3-half w3-blue w3-leftbar w3-border-indigo w3-round-large">

          <p>

            <b><i>Simple Present</i></b>

          </p>

          <table summary="" width="100%">

            <tr>

              <th colspan="3">

                Positive Form

              </th>

            </tr>

            <tr>

              <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">

                I<br>

                You<br>

                We<br>

                They

              </td>

              <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">

                live<br>

                work

              </td>

              <td rowspan="2" valign="middle">

                in Miami.<br>

                near my cousin.<br>

                next to the police station.

              </td>

            </tr>

            <tr>

              <td valign="middle" style="border-right:1px solid black">

                He<br>

                She<br>

                It

              </td>

              <td valign="middle" style="border-right:1px solid black">

                lives<br>

                works

              </td>

            </tr>

          </table>

        </div>

        <div class="w3-container w3-half w3-green w3-leftbar w3-border-lime w3-round-large">

          <p>

            <b><i>Simple Present</i></b>

          </p>

          <table summary="" width="100%">

            <tr>

              <th colspan="4">

                Negative Form

              </th>

            </tr>

            <tr>

              <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">

                I<br>

                You<br>

                We<br>

                They

              </td>

              <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">

                don't

              </td>

              <td rowspan="2" valign="middle" style="border-right:1px solid black">

                like<br>

                eat

              </td>

              <td rowspan="2" valign="middle">

                meat.<br>

                tea.<br>

                salad.

              </td>

            </tr>

            <tr>

              <td valign="middle" style="border-right:1px solid black">

                He<br>

                She<br>

                It

              </td>

              <td valign="middle" style="border-right:1px solid black">

                doesn't

              </td>

            </tr>

          </table>

        </div>

      </div>

      <p>

         

      </p>
<!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -->
<!-- Here starts the problem <div>'s -->
      <div class="w3-row">

        <div class="w3-section w3-margin-0 w3-padding-0">

          <div class="w3-container w3-half w3-red w3-leftbar w3-border-pink w3-round-large" style="height:260px">

            <p>

              <b><i>Simple Present</i></b>

            </p>

            <table summary="" width="100%">

              <tr>

                <th colspan="5">

                  Question Form

                </th>

              </tr>

              <tr>

                <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">

                  Do

                </td>

                <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">

                  I<br>

                  you<br>

                  we<br>

                  they

                </td>

                <td rowspan="2" valign="middle" style="border-right:1px solid black">

                  work

                </td>

                <td rowspan="2" valign="middle" style="border-right:1px solid black">

                  today?

                </td>

                <td valign="middle" style="border-bottom:1px solid black">

                  Yes, I/you/we/they do.<br>

                  No, I/you/we/they don't.<br>

                </td>

              </tr>

              <tr>

                <td valign="middle" style="border-right:1px solid black">

                  Does

                </td>

                <td valign="middle" style="border-right:1px solid black">

                  he<br>

                  she<br>

                  it

                </td>

                <td valign="middle">

                  Yes, he/she/it does.<br>

                  No, he/she/it doesn't.

                </td>

              </tr>

            </table>
<!-- This is the problem <div> with the unwanted margins -->
            <div class="w3-container w3-orange w3-leftbar w3-border-brown w3-round-large w3-margin-0" style="height:175px; width:100%;">

              <p>

                <strong>Subject Pronouns</strong> =<br>

                I/You/We/They/He/She/It

              </p>

              <p>

                <strong>Object Pronouns</strong> =<br>

                Me/You/Us/Them/Him/Her/It

              </p>

              <p>

                Do you like me?

              </p>

              <p>

                He likes her.

              </p>

            </div>

          </div>
<!-- end of problem <div> -->
          <div class="w3-container w3-half w3-indigo w3-leftbar w3-border-blue w3-round-large" style="height:435px">

            <p>

              <b><i>Simple Present</i></b>

            </p>

            <div class="w3-center">

              <p>

                <b>3rd Person Verb Form</b>

              </p>

            </div>

            <div class="w3-row">

              <div class="w3-container w3-quarter w3-border-bottom">

                I<br>

                You<br>

                We<br>

                They

              </div>

              <div class="w3-container w3-threequarter w3-border-bottom">

                work today.<br>

                cook dinner tonight.<br>

                drive well.<br>

                watch tv.

              </div>

            </div>

            <div class="w3-row">

              <div class="w3-container w3-quarter">

                He<br>

                She<br>

                It

              </div>

              <div class="w3-container w3-threequarter">

                works today.<br>

                cooks dinner tonight.<br>

                drives well.<br>

                watches tv.

              </div>

            </div>

            <p>

              In the 3rd person form (<i>he/she/it</i>) add <i>-es</i> to verbs that end with <i>-ch, -sh, -ss,</i> and

              <i>-o</i>.<br>

              He <i>watches</i> TV.<br>

              She <i>washes</i> the dishes.<br>

              It <i>finishes</i> at 8pm.

            </p>

            <p>

               

            </p>

          </div>

        </div>

      </div>

      <p>

         

      </p>

      <div class="w3-container w3-pink w3-leftbar w3-border-red w3-round-large">

        <div class="w3-row">

          <div class="w3-center">

            <strong>Unit Vocabulary</strong>

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-center">

            <strong>Adjectives</strong>

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-quarter w3-container">

            tall

          </div>

          <div class="w3-quarter w3-container">

            sad

          </div>

          <div class="w3-quarter w3-container">

            old

          </div>

          <div class="w3-quarter w3-container">

            ugly

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            rich

          </div>

          <div class="w3-third w3-container">

            thin

          </div>

          <div class="w3-third w3-container">

            poor

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            heavy

          </div>

          <div class="w3-third w3-container">

            short

          </div>

          <div class="w3-third w3-container">

            happy

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            intelligent

          </div>

          <div class="w3-third w3-container">

            good-looking

          </div>

          <div class="w3-third w3-container">

            young

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-center">

            <strong>Jobs</strong>

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            Architects design buildings

          </div>

          <div class="w3-third w3-container">

            construction workers build buildings

          </div>

          <div class="w3-third w3-container">

            fashion designers design clothes

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            chefs cook food

          </div>

          <div class="w3-third w3-container">

            sales reps sell things

          </div>

          <div class="w3-third w3-container">

            reporters write news articles

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-center">

            <strong>Daily Routines</strong>

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            get up

          </div>

          <div class="w3-third w3-container">

            go to bed

          </div>

          <div class="w3-third w3-container">

            watch TV

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            eat breakfast

          </div>

          <div class="w3-third w3-container">

            take a shower

          </div>

          <div class="w3-third w3-container">

            eat dinner

          </div>

        </div>

        <div class="w3-row">

          <div class="w3-third w3-container">

            eat breakfast

          </div>

          <div class="w3-third w3-container">

            start work

          </div>

          <div class="w3-third w3-container">

            finish work

          </div>

        </div>

      </div>

    </div>

  </body>

</html>



Link to comment
Share on other sites

OK, I got it working. Here is the code section of the page, it had a missing </div>, that's all there was to it.

 

      <div class="w3-row">
        <div class="w3-half">
          <div class="w3-container w3-red w3-leftbar w3-border-pink w3-round-large" style="height:260px">
            <p>
              <b><i>Simple Present</i></b>
            </p>
            <table summary="" width="100%">
              <tr>
                <th colspan="5">
                  Question Form
                </th>
              </tr>
              <tr>
                <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">
                  Do
                </td>
                <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black">
                  I<br>
                  you<br>
                  we<br>
                  they
                </td>
                <td rowspan="2" valign="middle" style="border-right:1px solid black">
                  work
                </td>
                <td rowspan="2" valign="middle" style="border-right:1px solid black">
                  today?
                </td>
                <td valign="middle" style="border-bottom:1px solid black">
                  Yes, I/you/we/they do.<br>
                  No, I/you/we/they don't.<br>
                </td>
              </tr>
              <tr>
                <td valign="middle" style="border-right:1px solid black">
                  Does
                </td>
                <td valign="middle" style="border-right:1px solid black">
                  he<br>
                  she<br>
                  it
                </td>
                <td valign="middle">
                  Yes, he/she/it does.<br>
                  No, he/she/it doesn't.
                </td>
              </tr>
            </table>
          </div>
                    <div class="w3-container w3-orange w3-leftbar w3-border-brown w3-round-large" style="height:175px">
              <p>
                <strong>Subject Pronouns</strong> =<br>
                I/You/We/They/He/She/It
              </p>
              <p>
                <strong>Object Pronouns</strong> =<br>
                Me/You/Us/Them/Him/Her/It
              </p>
              <p>
                Do you like me?
              </p>
              <p>
                He likes her.
              </p>
          </div>
        </div>
                <div class="w3-container w3-half w3-indigo w3-leftbar w3-border-blue w3-round-large" style="height:435px">
            <p>
              <b><i>Simple Present</i></b>
            </p>
            <div class="w3-center">
              <p>
                <b>3rd Person Verb Form</b>
              </p>
            </div>
            <div class="w3-row">
              <div class="w3-container w3-quarter w3-border-bottom">
                I<br>
                You<br>
                We<br>
                They
              </div>
              <div class="w3-container w3-threequarter w3-border-bottom">
                work today.<br>
                cook dinner tonight.<br>
                drive well.<br>
                watch tv.
              </div>
            </div>
            <div class="w3-row">
              <div class="w3-container w3-quarter">
                He<br>
                She<br>
                It
              </div>
              <div class="w3-container w3-threequarter">
                works today.<br>
                cooks dinner tonight.<br>
                drives well.<br>
                watches tv.
              </div>
            </div>
            <p>
              In the 3rd person form (<i>he/she/it</i>) add <i>-es</i> to verbs that end with <i>-ch, -sh, -ss,</i> and
              <i>-o</i>.<br>
              He <i>watches</i> TV.<br>
              She <i>washes</i> the dishes.<br>
              It <i>finishes</i> at 8pm.
            </p>
            <p>
               
            </p>
          </div>
        </div>
      </div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...