When I move something within a div, it shifts the whole div

HTML & CSS
1

So whenever I shift the text in this div (or anything else) it moves the div completely. How do I stop this?


<head>
  <title> Oviedo Auto Repair</title>
  <link rel="stylesheet" type="text/css" href="ovido.css">

</head>

<body>
<div id="wrapper">
  <nav>
    <ul class="navil">
      <li class="navil"><a href="index.html">home</a></li>
      <li class="navil"><a href="about.html">about</a></li>
      <li class="navil"><a href="services.html">services</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </nav>
  <header>
  </header>
  <content>
    <section>
      <div id="first">
        <p class="amazing">AMAZING</p>
      </div>
      <section>
        <div id="second">
        </div>
        <img src="http://i.dailymail.co.uk/i/pix/2015/02/12/2598C6D500000578-0-image-a-5_1423735253551.jpg" style="width:50%;float:right;height:500px;" />
      </section>
  </div>
</body>

</html>


body,
html {
  height: 100%;
  margin: 0px;
}

header {
  background: url("http://8-themes.com/wp-content/uploads/2015/11/Auto_Red_sports_car_on_a_dark_street_100743_.jpg");
  height: 100vh;
  width: 100%;
}


/*nav*/

ul.navil {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  margin: 0;
  padding: 0;
}

li.navil {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: green;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

#wrapper{
  width: 100%;
}

#second {
  background-color: #555;
  width: 50%;
  height: 500px;
  float: left;
}

#first {
  width: 100%;
  height: 550px;
  background-color: #d2d2d2;
}

p.amazing {
  margin-top: 10px;
}
2

The text in which div exactly? I see 4 divs with content so I’m not sure what item you are referring to?

What do you mean by ‘shift the text’ ? Do you mean add more text or are you trying to position something else alongside? It’s not really clear I’m afraid as to what you are referring to and how you are going about ‘shifting your text’?

Does this fiddle contain the example of your ‘shifted text’ or is this before you have tried to shift it?

Sorry to appear awkward but the question is not clearly defined enough for me to give a helpful answer. :slight_smile:

I can tell you that you are using techniques that are not viable and you will almost never apply arbitrary fixed heights to elements that will be holding content like text.

If you can clarify the question and specifically mention the elements you are talking about and show examples of where it is not working we will be glad to try and help :slight_smile:

1 Like
3

so when I type text (the p class amazing) the div first shifts down whenever I try to position the text somewhere in the div (hence the margin-top).

Also, I’m planning on putting text in all my divs. I just wanted help fixing this problem first. What techniques are not viable by the way?

4

I think you’re experiencing collapsing margins. :slight_smile:

https://www.sitepoint.com/collapsing-margins/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

1 Like
5

The ones mentioned in my post:)

This one specifgically:

#first {
	width: 100%;
	height: 550px;
	background-color: #d2d2d2;
}

The 550px is a magic number and you can never be sure that your text will always fit into that space.

It also seems that you have sized #second to match an image that is 500px tall which means you have two dependencies to take care of. What happens when the image size is changed will you remember to change everything else that is based on that size?

As I said above you will rarely size elements with fixed heights in that way as you really want the layout to work with whatever is thrown at it and not just for one set of explicit circumstances.

Yes, the top margin on the p element collapses onto the element above and effectively pushes the current element downwards. A quick fix is to add 1px padding-top to #first and then the margin will no longer collapse.

Collapsing margins are an important concept and not to be lightly skipped over until you understand the full implications or they will catch you out time and again :slight_smile: There are many ways to avoid them but best to read the links Erik posted.

Lastly avoid using ids for styling purposes and just stick to classes to avoid specificity issues down the line. Remember to use useful names for your classes and ids rather than first or second etc as that does not mean a lot in the structure of an html page.

I also note that there is no element called ‘content’ in html5 so remove it. However I think you meant to add a closing section tag as there is one missing in that place in your html.

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.