I'm facing a problem with the margin and display setup in my assignment

I am encountering a bit of confusion regarding the margin when implementing the following code:

Section {
  background-color: #FFFFFF;
  width="100%";
}

p1 {
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 45px;
  margin-left: 165px;
}

p2 {
  font-family: Roboto;
  font-size: 22px;
  font-height: 1px;
  margin-top: 10px;
  margin-left: 165px;
}
<section>
  <p class="p1"> Content 1 </p>
  <p class="p2"> Content 2 </p>
</section>

However, upon omitting the display property, the background in the section does not cover all the content. When I add display: inline-block, the background covers the content but I encounter a similar issue when switching between display:inline-block and display: inline or display:block. Could someone please explain to me what is happening?

htmlcss

Answer №1

Ensure to include overflow:auto, overflow:hidden, or overflow:scroll as needed.

div {
    background-color: blue;
    width: 100%;
    overflow:hidden; // adjusted
}
.p1 {
    font-family: Arial;
    font-size: 18px;
    margin-top: 30px;
    margin-left: 100px;
}
.p2 {
    font-family: Arial;
    font-size: 18px;
    margin-top: 5px;
    margin-left: 100px;
}
<div>
  <p class="p1"> Text 1 </p>
  <p class="p2"> Text 2 </p>
</div>

Answer №2

The main problem lies in the incorrect use of double quotes in the width property of the section CSS. Additionally, the class selectors in your CSS do not begin with a period. Simply make the necessary updates to your CSS and it should function correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with jqTransform not displaying the select box value on a hidden contact form

Could really use some assistance here and apologize if it's a hassle: Link to contact form To view the contact form, simply click the "Contact" button in the top left corner. The jqTransform jQuery plugin is being used to style it. Initially, it&apo ...

javascriptjquerycsscontact-form

Is it possible to use a JavaScript string as a selector in jQuery?

So, my issue is with the following JavaScript code snippet: for ( i=0; i < parseInt(ids); i++){ var vst = '#'+String(img_arr[i]); var dst = '#'+String(div_arr[i]); } I'm wondering how I can proceed in jQuery to handle ...

javascriptjquerystringvariableshtml

There seems to be a glitch in my programming that is preventing it

Can someone please help me troubleshoot this code? I'm unable to figure out what's going wrong. The concept is to take user input, assign it to a variable, and then display a string. However, nothing appears on the screen after entering a name. ...

javascripthtmlcss

Troubleshooting issues with Bootstrap Nav-pills functionality

I have encountered an issue with my navigation structure. I am using a main nav-menu and a secondary nav-menu within the same div. When I first enter the page, the "Profile" tab is correctly active by default. Then, when I click on "Test", it becomes activ ...

htmlbootstrap-4navbootstrap-5nav-pills

Retrieving data from an API after the onClick event is activated

I'm facing a bit of a challenge with an HTML & JavaScript issue, which I believe should be straightforward to resolve. Since frontend development is not really my forte, I am hoping to find some assistance here. Task: A friend who owns a website buil ...

javascripthtmlasync-await

An HTML component experiencing a problem with font-size display

Currently, I'm encountering an issue with the font size in my PDF report when rendering an embedded HTML component using the following Java code: Snippet of my Java code : StringBuilder htmlBody = new StringBuilder(""); htmlBody.append("<p class= ...

htmljasper-reportsexport-to-pdf

Turn off hover effect for MUI DataGrid

I'm having trouble figuring out how to disable the hover effect on a row in the MUI Datagrid. I've searched through the API documentation but couldn't find a straightforward solution. Any suggestions on how to achieve this? <DataGrid ...

cssreactjsmaterial-uijsx

Optimizing website layout for mobile devices

I have a website with a fixed page layout at . It displays properly on desktop browsers but not on mobile devices. The website is adjusting to fit the browser size, but some components are changing format. Can anyone offer assistance? Thank you! ...

htmlcssfixed-widthpage-layout

What could be causing the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

I have implemented a JQuery plugin for dropdown menus that can be found at the following link: https://code.google.com/p/select-box/ Currently, I am facing an issue where the script only seems to work for the first dropdown menu out of 4. I am unsure abo ...

javascriptjqueryhtmldrop-down-menu

Running PHP code within an HTML file served by PHP

A unique and innovative approach was taken by incorporating a DIV element in the HTML code, which dynamically populates with content from the main_login.php file. The main_login.php file plays a crucial role in loading the homepage with member-specific con ...

phphtml

Refresh an image on my webpage using jQuery

There seems to be an issue on my page where one of the images only displays after reloading the page. Initially, the image only loads partially. The reason behind this behavior is still unclear to me. I've been attempting to reload only the image on ...

jquerycsshtml

Fixed Container housing a Child Div with Scrollbar

I am faced with a challenge involving a lengthy navigation menu (.nav-main) nested within a fixed header (header). When the navigation menu is toggled using jQuery .toggle(), the content extends beyond the window height and does not scroll. I am looking fo ...

javascriptjquerycss

Varied spacing between horizontal and vertical items in a list

The issue with the spacing between horizontal and vertical list items is perplexing. Despite having identical margin, padding, height, and width, they seem to display differently. While manual adjustment of margins or paddings can resolve this, I am curiou ...

htmlcss

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

csssafarisass

Draggable vue includes a Textarea HTML element that allows users to easily

The issue lies in implementing the draggable functionality on a textarea element. While the textarea allows text input and deletion, trying to select the text using pointer events triggers the dragging function instead, as shown in the image below: https ...

javascripthtmlvue.jstextareadraggable

What is the best way to combine a top <div> with a bottom <div> in an image without creating unsightly white gaps?

I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving ...

htmlcssweb-frontend

Responsive Bootstrap 4 Login Form with customized top height

This login form was created using Bootstrap 4, starting with a preset that I then customized to fit my needs. As someone new to Bootstrap and CSS, I struggled with making the form responsive. When resizing the window, the top portion gets cut off and is no ...

htmlbootstrap-4

Utilizing a hidden file-input, IE10 is able to transmit a FormData object via ajax

I'm encountering difficulties when trying to send a form that includes a display:none file-input via ajax. It works fine in Chrome (46.0.2490.71), but not in IE10 (10.0.9200.17492). I've tried various solutions without success, and it's cruc ...

javascriptajaxhtmlfile-uploadinternet-explorer-10

Reverting a concealed segment

Can anyone make sense of my unconventional explanation? I've set up a hidden section as shown below: <section class="intro"> <label> <input type="checkbox"> <span class="menu"> <span class="hamburger"></span&g ...

javascriptjqueryhtmlcss

how to toggle a pre-selected checkbox in a Vue component

https://i.stack.imgur.com/6GQl7.png When dealing with a tree view checkbox in Vue, I encountered an issue where editing data within a selected zone should automatically check the corresponding countries based on previous selections. The ID of the selected ...

htmlsqllaravelvue.js