CODEWITHSUNDEEP
htmlcss
AddB
AddB

Reputation: 47

Margin not being applied in CSS

I have applied a margin to the top of the blue section below, however it doesn't seem to be showing. Also it seems to be right up against the left side of the screen, any ideas how to fix?

The problem shows when CSS Sheet 2 is being applied

enter image description here

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;
}

Upvotes: 1

Views: 93

Answers (4)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Flex approach.

Adjust margin according to your requirement.

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>

Upvotes: 2

manuj gogoi
manuj gogoi

Reputation: 24

Remove float: none; from .m3 class of CSS Sheet 2.

Upvotes: 0

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

You are using shorthand property on m1 but not using on m3

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

Here is the updated jsfiddle https://jsfiddle.net/758rrLua/

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

Its because you have not cleared the float which you applied for .m1 and .m2 selectors. Try adding a div to clear below m1 and m2. Try this code.

<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;
}

Upvotes: 0

Related Questions