CSS div sticks with div

Question

CSS div sticks with div

Navigation

#1 by (0 votes)

0

I have a problem with a job I'm doing, I want to make figures based on DIVS the first line or you could call the top part of the figure I could make the problem is that when doing the part of down or the line that is below the first the divs of my first line join with those of the first although I add a margin-top and a margin-left I am a beginner on the web so I do not know many tricks, I thank you in advance.

This is my HTML This my CSS

And that's how it is displayed

And what I need is not to join the divs above

#uno {
  margin-left: 800px;
}

#dos {
  margin-right: 100px;
}

.gorra {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
}

.gorra1 {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
  margin-top: 50px;
}

<!DOCTYPE html>
<html>
<body>
  <div id="uno">
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
  </div>

  <div id="dos">
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
  </div>
</body>
</html>

html css

asked by Armando robles robles 04.09.2018 в 04:16

source

1 answer

when downloading a pdf file from a directory does not take the format or find the file 2nd Strigbuffer sends null

score 0 · Answer 1

The problem you're having is because you've used float: left; without following it for a clear: both. When you use float, the divs leave the normal flow of the page, and your container usually stops taking up space. If you add a clear after the divs with float, your container will reoccupy the space that corresponds, and the margins will be applied.

Below you see two examples of how you can implement it:

Via pseudoelement:

#uno:after {
  content: ""; 
  display: block;
  clear: both; 
}

This creates a pseudo element to whom to apply the clear. It has to your favor that you will not have an empty div to confuse.

Via div vacio

At the end of #dos, you add:

<div class="clear"></div>

And in the css:

.clear {clear: both;}

#uno {
  margin-left: 800px;
}
#uno:after {
  content: ""; 
  display: block;
  clear: both; 
}
#dos {
  margin-right: 100px;
}

.gorra {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
}

.gorra1 {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
  margin-top: 50px;
}
   .clear {clear: both; }

<!DOCTYPE html>
<html>
<body>
  <div id="uno">
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
  </div>

  <div id="dos">
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

For those who look at this snippet, I recommend that you see it in full screen.