user11438965
Reputation:
How do I keep the aside element from causing my website to have to scroll to the right
I've been trying to make my website responsive for devices with a maximum width of 600px using CSS. Everything works fine except for my aside element. When I put my website in a responsiveness simulator, I can scroll to the right (which is not supposed to happen).
Here is my code: https://codepen.io/xirokif/pen/OJpjNWO
/* https://codepen.io/xirokif/pen/zYZdqNg */
aside {
float: right;
width: 540px;
background-color: #404653;
border: 3px solid #30353f;
padding: 15px;
position: relative;
}
@media screen and (max-width: 600px) {
aside {
width: 200px;
padding: 8px;
}
aside,
li {
padding: -3px;
margin: 3px;
margin-right: 30px;
list-style-type: none;
}
aside,
p {
margin-right: 5px;
}
aside,
summary {
padding: 8px;
margin: 3px;
}
aside,
details {
margin-right: -15px;
margin-left: 5px;
}
p {
margin-bottom: 15px;
}
hr {
margin-top: 15px;
}
a {
margin-top: 20px;
}
}
/* table styling */
table,
th,
td {
border: 2px solid #ffffff;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(even) {
background-color: #3d4452;
}<header>
<h1>HTML Forms</h1>
<hr />
<main>
<details>
<summary>HTML Forms</summary>
<p>An HTML form is used to collect user input, and is most often sent to a server for processing.</p>
</details>
</main>
<hr />
</header>
<!-- Page content section -->
<section>
<!-- Elements section -->
<section>
<!-- Aside element -->
<section>
<aside>
<div>
<p style="font-size: 15px;">Form tags</p>
<details>
<summary>Elements</summary>
<ul>
<li>form</li>
<li>input</li>
<li>label</li>
<li>input</li>
</ul>
</details>
<details>
<summary>Attributes</summary>
<ul>
<li>text</li>
<li>radio</li>
<li>checkbox</li>
<li>submit</li>
</ul>
</details>
</div>
</aside>
</section>
<!-- Form element -->
<section>
<h2>The <code>form</code> element</h2>
<p>The element is used to create an HTML form for user input</p>
<p>The elment is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.</p>
<hr>
</section>
<!-- Input element -->
<section>
<h2>The <code>input</code> element</h2>
<p><code>input</code> is the most used form element</p>
<p>The element can be displated in many ways, depending on the <code>type</code> attribute.</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>Displays a single-line text input field</td>
</tr>
<tr>
<td>radio</td>
<td>Displays a radio button (for selecting one of many choices)</td>
</tr>
<tr>
<td>checkbox</td>
<td>Displays a checkbox (for selecting zero or more of many choices)</td>
</tr>
<tr>
<td>submit</td>
<td>Displays a submit button (for submitting the form</td>
</tr>
<tr>
<td>button</td>
<td>Displays a clickable button</td>
</tr>
</tbody>
</table>
<hr>
</section>
<section>
<h2>The <code>label</code> Element</h2>
<p>The <code>label</code> tag defines a label for many form elements.</p>
<p>The <code>for</code> attribute of the <code>label</code> tag should be equal to the <code>id</code> attribute of the <code>input</code> element to put them together.</p>
<p class="note"><b>Note</b> - It is useful for screen-reader users because the screen-reader will read the label out loud when the user focuses on the input element.</p>
<hr>
</section>
</section>
<!-- input attributes section -->
<section>
<!-- Text Fields -->
<section>
<h2>Text Fields</h2>
<p>The
<!-- Insert code block here -->defines a single-line input field for text input.
</p>
<a href="html-forms-example-1.html" target="_blank">Example Here</a>
<hr>
</section>
<section>
<h2>Radio Buttons</h2>
<p>The
<!-- Insert code block here -->defines a radio button.
</p>
<p>Radio buttons let a user select <strong>ONE</strong> of a limited number of choices.</p>
<a href="html-forms-example-2.html" target="_blank">Example Here</a>
<hr />
</section>
<section>
<h2>Checkboxes</h2>
<p>The
<!-- Insert code block here -->defines a checkbox.
</p>
<p>Checkboxes let a user select <b>ZERO</b> or <b>MORE</b> options of a limited number of choices.</p>
<a href="html-forms-example-3.html" target="_blank">Example Here</a>
<hr />
</section>
<section>
<h2>The Submit Button</h2>
<p>The
<!-- Insert code block here -->defines a button for submitting the form data to a form-handler.
</p>
<p>The form-handler is typically a file on the server with a script for processing input data.</p>
<p>The form-handler is specified in the form's <code>action</code> attribute.</p>
<a href="html-forms-example-4.html" target="_blank">Example Here</a>
<hr>
</section>
<section>
<h2>The Name Attribute for <code>input</code></h2>
<p>Each input field must have a <code>name</code> attribute to be submitted.</p>
<p>If the <code>name</code> attribute is omitted, the value of the input field will not be sent at all.</p>
</section>
</section>
</section>The image one the top is normal the one on the bottom shows the scroll
How do I fix this?
Upvotes: 1
Views: 627
Answers (1)
Hans Spieß
Reputation: 935
The negative margin on the aside element causes the overall body width to exceed 100%. That is why a scroll bar is shown by browsers.
Remove the line margin-right: -15px; in the declaration for the aside element and the scrollbar should be gone.
aside {
float: right;
width: 540px;
background-color: #404653;
border: 3px solid #30353f;
padding: 15px;
position: relative;
}
@media screen and (max-width: 600px) {
aside {
width: 200px;
padding: 8px;
}
aside,
li {
padding: -3px;
margin: 3px;
margin-right: 30px;
list-style-type: none;
}
aside,
p {
margin-right: 5px;
}
aside,
summary {
padding: 8px;
margin: 3px;
}
aside,
details {
/* margin-right: -15px; This line must be gone! */
margin-left: 5px;
}
p {
margin-bottom: 15px;
}
hr {
margin-top: 15px;
}
a {
margin-top: 20px;
}
}
/* table styling */
table,
th,
td {
border: 2px solid #ffffff;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(even) {
background-color: #3d4452;
}<header>
<h1>HTML Forms</h1>
<hr />
<main>
<details>
<summary>HTML Forms</summary>
<p>An HTML form is used to collect user input, and is most often sent to a server for processing.</p>
</details>
</main>
<hr />
</header>
<!-- Page content section -->
<section>
<!-- Elements section -->
<section>
<!-- Aside element -->
<section>
<aside>
<div>
<p style="font-size: 15px;">Form tags</p>
<details>
<summary>Elements</summary>
<ul>
<li>form</li>
<li>input</li>
<li>label</li>
<li>input</li>
</ul>
</details>
<details>
<summary>Attributes</summary>
<ul>
<li>text</li>
<li>radio</li>
<li>checkbox</li>
<li>submit</li>
</ul>
</details>
</div>
</aside>
</section>
<!-- Form element -->
<section>
<h2>The <code>form</code> element</h2>
<p>The element is used to create an HTML form for user input</p>
<p>The elment is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.</p>
<hr>
</section>
<!-- Input element -->
<section>
<h2>The <code>input</code> element</h2>
<p><code>input</code> is the most used form element</p>
<p>The element can be displated in many ways, depending on the <code>type</code> attribute.</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>Displays a single-line text input field</td>
</tr>
<tr>
<td>radio</td>
<td>Displays a radio button (for selecting one of many choices)</td>
</tr>
<tr>
<td>checkbox</td>
<td>Displays a checkbox (for selecting zero or more of many choices)</td>
</tr>
<tr>
<td>submit</td>
<td>Displays a submit button (for submitting the form</td>
</tr>
<tr>
<td>button</td>
<td>Displays a clickable button</td>
</tr>
</tbody>
</table>
<hr>
</section>
<section>
<h2>The <code>label</code> Element</h2>
<p>The <code>label</code> tag defines a label for many form elements.</p>
<p>The <code>for</code> attribute of the <code>label</code> tag should be equal to the <code>id</code> attribute of the <code>input</code> element to put them together.</p>
<p class="note"><b>Note</b> - It is useful for screen-reader users because the screen-reader will read the label out loud when the user focuses on the input element.</p>
<hr>
</section>
</section>
<!-- input attributes section -->
<section>
<!-- Text Fields -->
<section>
<h2>Text Fields</h2>
<p>The
<!-- Insert code block here -->defines a single-line input field for text input.
</p>
<a href="html-forms-example-1.html" target="_blank">Example Here</a>
<hr>
</section>
<section>
<h2>Radio Buttons</h2>
<p>The
<!-- Insert code block here -->defines a radio button.
</p>
<p>Radio buttons let a user select <strong>ONE</strong> of a limited number of choices.</p>
<a href="html-forms-example-2.html" target="_blank">Example Here</a>
<hr />
</section>
<section>
<h2>Checkboxes</h2>
<p>The
<!-- Insert code block here -->defines a checkbox.
</p>
<p>Checkboxes let a user select <b>ZERO</b> or <b>MORE</b> options of a limited number of choices.</p>
<a href="html-forms-example-3.html" target="_blank">Example Here</a>
<hr />
</section>
<section>
<h2>The Submit Button</h2>
<p>The
<!-- Insert code block here -->defines a button for submitting the form data to a form-handler.
</p>
<p>The form-handler is typically a file on the server with a script for processing input data.</p>
<p>The form-handler is specified in the form's <code>action</code> attribute.</p>
<a href="html-forms-example-4.html" target="_blank">Example Here</a>
<hr>
</section>
<section>
<h2>The Name Attribute for <code>input</code></h2>
<p>Each input field must have a <code>name</code> attribute to be submitted.</p>
<p>If the <code>name</code> attribute is omitted, the value of the input field will not be sent at all.</p>
</section>
</section>
</section>Upvotes: 1
Related Questions
- How to stop a certain part of html page from scrolling?
- Problem with the positioning of an aside in an html page
- Having trouble aligning <aside> to the left of <article> using float
- How do I keep elements from moving when I scroll to the right?
- Making an <aside> element a specific part of a page?
- Element keeps scrolling with page
- My aside is not going to the right side of the section
- Why is my aside so low on the webpage?
- How do I tell an aside tag which side to go on?
- Why is my aside at the bottom of this page?