hikingwithu2 Posted December 29, 2016 Share Posted December 29, 2016 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 More sharing options...
dsonesuk Posted December 29, 2016 Share Posted December 29, 2016 Every element that uses 'w3-container' has 16px padding either side, you have a nested 'w3-container' element within a 'w3-container' element, so it will be 32px from either edge. Link to comment Share on other sites More sharing options...
hikingwithu2 Posted December 30, 2016 Author Share Posted December 30, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now