CSS is failing to apply the margin

I've added a margin to the top of the blue section below, but it doesn't seem to be displaying correctly. Additionally, it appears to be right up against the left side of the screen. Any suggestions on how to address this?

The issue arises when CSS Sheet 2 is applied.

https://i.sstatic.net/hOBr4.png

HTML Code:

<html>
<header>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="responsive.css" 
     media="screen and (max-width:900px)">
</header>

<body>

<div class="m1">
    <p>My content</p>
</div>

<div class="m2">
    <p>My content</p>
</div>

<div class="m3">
    <p>My content</p>
</div>


</body>

CSS Sheet 1

body {
    width:1000px;
    margin:20px auto;
    max-width:100vw;
}

.m1 {
    background-color:red;
    width:30%;
    height:500px;
    float:left;
    margin: 0 2.5% 0 2.5%;
}

.m2 {
    background-color:yellow;
    width:30%;
    height:500px;
    float:left;
    margin-right:2.5%;
}

.m3 {
    background-color:blue;
    width:30%;
    height:500px;
    float:left;
    margin-right:2.5%;
}

CSS Sheet 2

body {

}

.m1 {
    width:42.5%;
}

.m2 {
    width:42.5%;
}

.m3 {
    clear:both;
    float:none;
    width:85%;
    margin:20px 0 0 0;
}
htmlcss

Answer №1

Utilizing the Flex method

Make adjustments to the margin as needed.

body {
  width: 100vw;
  margin: 0;
  background: grey;
  display: flex;
  flex-wrap: wrap;
}

.m1 {
  width: calc(50vw - 60px);
  background: red;
  height: 500px;
  margin: 30px;
}

.m2 {
  width: calc(50vw - 60px);
  background: green;
  height: 500px;
  margin: 30px;
}

.m3 {
  height: 500px;
  background: blue;
  width: calc(100vw - 60px);
  margin: 0 30px 30px 30px;
}
<body>
  <div class="m1">
    <p>My content</p>
  </div>
  <div class="m2">
    <p>My content</p>
  </div>
  <div class="m3">
    <p>My content</p>
  </div>
</body>

Answer №2

Take out the float: none; attribute from the .m3 selector in CSS Style Sheet 2.

Answer №3

It appears that the issue stems from not properly clearing the float property applied to the .m1 and .m2 selectors. To resolve this, you can insert a div element with a clear property following m1 and m2. Here is an example of how you can implement this fix:

<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="responsive.css" media="screen and (max-width:900px)">
  </head>

  <body>

    <div class="m1">
      <p>My content</p>
    </div>

    <div class="m2">
      <p>My content</p>
    </div>
    <div class="clear">
    </div>

    <div class="m3">
      <p>My content</p>
    </div>
</body>

body {
  width: 1000px;
  margin: 20px auto;
  max-width: 100vw;
}

.m1 {
  background-color: red;
  width: 30%;
  height: 500px;
  float: left;
  margin: 0 2.5% 0 2.5%;
}

.m2 {
  background-color: yellow;
  width: 30%;
  height: 500px;
  float: left;
  margin-right: 2.5%;
}

.m3 {
  background-color: blue;
  width: 30%;
  height: 500px;
  float: left;
  margin-right: 2.5%;
}

body {}

.m1 {
  width: 42.5%;
}

.m2 {
  width: 42.5%;
}

.m3 {
  clear: both;
  float: none;
  width: 85%;
  margin: 20px 0 0 0;
}

.clear {
  clear: both;
}

Answer №4

You have applied shorthand property to m1 but neglected to do the same for m3

.m3 {
    background-color:blue;
    width:30%;
    height:500px;
    float:left;
    margin: 20px 2.5% 0 2.5%;
}

Check out the updated jsfiddle https://jsfiddle.net/758rrLua/

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

Use PHP to dynamically assign a class to each <option> element within a loop

How do I go about adding a CSS class to every option within my code? Here is the PHP code provided, and you can refer to the screenshot below for where the class property should be placed - what adjustments should be made in order to include a class in eac ...

phphtml

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

What is the easiest way to import a CSS file into just one specific page in Ionic2?

Take, for instance, my desire to import the following: <link rel="stylesheet" href="mycss.css"> into example_page. I attempted importing it from index.html, but I fear that by doing so, the CSS will be loaded on every page each time I run my app. I ...

cssionic-frameworkionic2

Trouble with CSS dropdown menu performance when using an iPad

My CSS-only dropdown menu works perfectly on desktop, but on mobile Safari on an iPad, when a top-level navigation link is clicked, the dropdown menu briefly appears before the user is taken to a new page. I've researched extensively and found that i ...

htmlioscss

When leaving the page, onBeforeUnload function aborts any ongoing HTTP requests

When attempting to send an http request using the fetch API upon leaving the page, I am encountering a blockage of the request. Is there a solution to this issue without resorting to using an async function or waiting for the request to complete, which tri ...

javascripthtmlhttpdomfetch-api

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Click here to see a 3D Circle Flip effect. It works correctly in Chrome, but in Firefox the text does not change when flipping. ...

css

I am facing an issue with the Options functionality in Materialize, and the remove method does not seem to work when I am using the

Having a little trouble appending options in a materialize select for my project. Can someone take a look at my code snippet below and provide some guidance on what changes I should make? Thanks! $(document).ready(function() { $(".condition").click(fu ...

javascriptjquerycssangularjsmaterialize

Using JQuery to load a page into a div with custom styles

I need to implement the use of .load in order to load an external page into a div on the current user's page. Does .load also apply the styles from the current stylesheet defined in that page after loading the content? If not, what alternatives should ...

javascriptjquerycssajax

Arranging the placement of the dropdown menu

I am struggling with positioning the items in my dropdown menu. The functionality itself is working perfectly, but the issue arises when it comes to aligning the dropped down items. Initially, I positioned them based on a smaller screen size, but when view ...

jqueryhtmlcss

The dialog box does not display properly on the screen when selecting multiple files

When I try to upload more than 25 files in the dialog box, the length of the box increases and there is no scrollbar to view all the files. Check out the screenshot: https://i.sstatic.net/vBcsh.png I added 36 files but couldn't see them all at once ...

javascriptjquerycssember.jsember-1

Ways to retrieve the count of child divs using css or sass

Imagine you have a CSS list structured like this: <ul class="parent"> <li class="child"></li> </ul> The child items are generated using an iterator. Is there a way to determine the number of children within the parent element us ...

javascriptcsssass

JavaScript Event Listener not Working Properly

I've been attempting to implement a feature on my website where the header hides when scrolling down and re-appears when scrolling up. However, I'm struggling to make use of the code snippet below to achieve this functionality. Despite my thoroug ...

javascripthtmlcss

Missing sidebar display

Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...

javascripthtmlcssnavbarsidebar

Show user information from a MySQL database in a dynamically generated table using PHP

I am working on developing an absence tracking system using PHP and MySQL. Each absence is categorized by a specific leave type, such as sick or emergency. The goal is to present this information in an HTML table format where the names of users are display ...

phphtmlmysql

What is the best way to remove a CSS style using JavaScript?

For my website automation using Selenium, I encountered a challenging dropdown that was not the standard native one but a custom-designed version. To tackle this issue, I needed to set its CSS class to hidden in order to access the native functionality smo ...

javascriptjquerycssseleniumselenium-webdriver

The AJAX requests in my project are failing to trigger upon touch events when using the jQuery Plugin

Ensuring that both <script src="hammer.js"></script> and <script src="../jquery.hammer.js-master/jquery.hammer.js"></script> have been correctly included in my header. I have a mouse click-triggered AJAX event for dynamic and depen ...

javascriptjqueryhtmlajaxhammer.js

The row containing a list of inline elements cannot be cleared in Safari due to the ineffectiveness of the

I have encountered an issue with my list formatting that seems to work in Chrome and Firefox but not in Safari. The pseudo attribute is not taking effect in Safari and I am wondering if there is a workaround or a different approach that I should take. (Not ...

csslistlessinlineline-breaks

How to use rvest in R for unformatted web scraping

Can anyone help me with extracting lyrics from a website using R? My current output is not formatted correctly. library(rvest) url <- "https://www.letras.mus.br/lily-allen/fuck-you" datatest <- read_html(url) b <- datatest %> html_node(" ...

htmlrweb-scrapingrvest

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...

htmlcss